在上线项目中,用Vue写一个星级评价
先看一下效果:
html:
<div class="big-star-box">
<img :src="imgNum>0 ? srcStar : srcNoStar" @click="imgItem(1)">
<img :src="imgNum>1 ? srcStar : srcNoStar" @click="imgItem(2)">
<img :src="imgNum>2 ? srcStar : srcNoStar" @click="imgItem(3)">
<img :src="imgNum>3 ? srcStar : srcNoStar" @click="imgItem(4)">
<img :src="imgNum>4 ? srcStar : srcNoStar" @click="imgItem(5)">
</div>
css:
.big-star-box{
display: flex;
justify-content: center;
align-items: center;
}
.big-star-box img{
vertical-align: top;
width: 26px;
height: 26px;
padding: 0 9px;
}
vue.js:
var vue=new Vue({
el:"#vue",
data:{
imgNum:2,
srcStar:'../static/img/common/icon_star_big.jpg',
srcNoStar:'../static/img/common/icon_nostar_big.jpg'
},
created:function(){ },
mounted:function(){ },
methods:{
imgItem:function (num) {
this.imgNum = num;
}
}
})
在上线项目中,用Vue写一个星级评价的更多相关文章
- 转:C4项目中验证用户登录一个特性就搞定
转:C4项目中验证用户登录一个特性就搞定 在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用 ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- 一个项目中:只能存在一个 WebMvcConfigurationSupport (静态文件失效之坑)
一个项目中:只能存在一个 WebMvcConfigurationSupport 在一个项目中WebMvcConfigurationSupport只能存在一个,多个的时候,只有一个会生效. 静态文件访问 ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- 教你用Vue写一个开心消消乐
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效 ...
- 在webpack构建的项目中使用vue
一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpa ...
- C#.NET常见问题(FAQ)-程序如何把窗体文件从从一个项目中复制到另一个项目
一个窗体有三个文件,全部拷贝到新的项目中 在新的项目中点击显示所有文件,然后右击导入的文件,点击包括在项目中,会自动修改颜色(此时还没有被识别为窗体) 重启这个项目,三个文件已经被识别出来了 ...
随机推荐
- Java_异常以及处理
目录 JAVA异常 异常的处理机制 自定义异常 写了一天的bug,来try...catch...finally了解一下.异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. ...
- 电脑移动后WIFI连接失败解决方法
1.现象原因 经常会发现将自己的电脑带到不同的地方后连接附近WIFI失败的现象,这是什么原因造成的了,觉得明明之前还有连过这个无线,密码都是正确的,无线连接的图标显示一个大大大的感叹号! 像下面一样 ...
- 末学者笔记——SAMBA服务、FTP服务讲解
samba服务 一.概念: Smb主要作为网络通信协议; Smb是基于cs(client,sever)架构: 完成Linux与windows之间的共享:linux与linux之间共享用NFS 二. ...
- 《ServerSuperIO Designer IDE使用教程》- 5.树形结构管理设备驱动,小版本更新。发布:v4.2.3.1版本
v4.2.3.1 更新内容:1.选择和管理设备驱动,增加树状结构显示.2.优化ide代码,核心代码没有改动.下载地址:官方下载 5. 树形结构管理设备驱动,小版本更新 5.1 概述 此次升级主要 ...
- 使用Windows Service Wrapper快速创建一个Windows Service 如nginx
前言 今天介绍一个小工具的使用.我们都知道Windows Service是一种特殊的应用程序,它的好处是可以一直在后台运行,相对来说,比较适合一些需要一直运行同时不需要过多用户干预的应用程序,这一类我 ...
- POJ 1966 Cable TV Network (点连通度)【最小割】
<题目链接> 题目大意: 给定一个无向图,求点连通度,即最少去掉多少个点使得图不连通. 解题分析: 解决点连通度和边连通度的一类方法总结见 >>> 本题是求点连通度, ...
- Learning English with EnglishClass101.com---10 Habits of highly Effective Learners
you can find it on YouTube:Learning English with EnglishClass101.com 10 Habits of highly Effective L ...
- APP产品设计及运营时常见的问题
目录 一.APP设计之初必须预埋的功能 二.H5活动页入口设计 三.全套icon /menu icon / logo图,统一后台设置便于活动推广 四.webview与原生页面的路由应统一改善用户体验 ...
- go片段代码
关于枚举类型
- 线段树模板1 [Luogu P3372]
代码+注释: #include <iostream> #include <cstdio> using namespace std; int n, q, flag, x, y, ...