vue 五星评价插件
html:
<div class="starBox" ref="star1">
<div class="star" v-for="(item,index) in starArr1" :key="index" @click="starClick1(index)">
<img :src="'../../static/images/'+item.imgSrc">
</div>
</div>
js:
export default {
data () {
return {
starArr1: [{imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}]
}
},
methods: {
starClick1 (index) {
this.starArr1.forEach((element, i) => {
this.$set(element, 'imgSrc', 'star1.png')
if (i <= index) {
this.$set(element, 'imgSrc', 'star2.png')
}
})
this.commentScore[0] = index + 1
}
}
}
css:
.starBox {
display: flex;
display: -webkit-flex;
}
.starActive {
color: red;
}
.star img {
width: 40px;
height: 20px;
}
vue 五星评价插件的更多相关文章
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- 分享一个自己写的vue多语言插件smart-vue-i18n
前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压 ...
- 开发工具:sublime text3安装Vue语法高亮插件
一.将插件克隆到Sublime的packages目录 1.下载并解压插件(或直接git命令clone),得到vue-syntax-highlight-master文件夹 插件地址:https://gi ...
- Vue.js devtool插件安装后无法使用的解决办法
初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...
- Vue实战之插件 sweetalert 的使用
安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...
- jquery 五星评价(图片实现)
1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- [vue]初探vue生态核心插件Vuex
为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...
- Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入
目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...
随机推荐
- POJ 3667 线段树区间合并裸题
题意:给一个n和m,表示n个房间,m次操作,操作类型有2种,一种把求连续未租出的房间数有d个的最小的最左边的房间号,另一个操作时把从x到x+d-1的房间号收回. 建立线段树,值为1表示未租出,0为租出 ...
- haproxy Mycat集2---KeepAlived
KA 配两台 MASTER,BACKUP节点 安装Keepalived 1.下载安装依赖包 yum install -y wget make gcc openssl-devel popt-devel ...
- HTTP请求默认值
填写后,后面的请求如果对应的未填写,默认使用该参数
- ResultSetMetaData中getColumnLabel和getColumnName的区别
利用jdbc连接数据库查询时,通常返回的结果就是每行数据的键值对集合.这时我们需要知道查询出来的数据有哪些字段.根据ResultSet结果集得到的ResultSetMetaData就可以获取到每个字段 ...
- The linux command 之网络
一.检查和检测网络 ping命令——向网络主机发送特殊数据包 [me@linuxbox ~]$ ping www.baidu.com 按Ctrl+C终止程序 tracepath——跟踪网络数据包的传输 ...
- animation,transition,transform小练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Centos 6.5 python版本升级到2.7.8
Centos6.5默认的 python版本是2.6 为了使用aliyuncli工具,直接用pip安装aliyuncli提示错误. 所以决定升级下python版本,但是yum依赖于python2.6,升 ...
- csps模拟92数列,数对,最小距离题解
题面:https://www.cnblogs.com/Juve/articles/11767225.html 数列: 简化题意:已知a,b,c,求满足$a*x+b*y=c$的$x+y$最小值 然后ex ...
- 计数dp+概率+大数——(抽屉问题解的个数)zoj3380
难的地方在于计数dp..给定范围[1,n]的数去填m个位置,要求不能出现超过I个相同的数, 那就用dp[i][j]表示在阶段i,已经填了j个位置的可能解法,那么只要枚举i填的位置数k∈[0,min(j ...
- java反射获取和设置实体类的属性值 递归所有父类
最近做一个通用数据操作接口,需要动态获取和设置实体类的属性值,为了通用实体做了多重继承,开始网上找到代码都不支持父类操作,只能自己搞一个工具类了,此工具类可以设置和获取所有父类属性,代码贴下面拿走不谢 ...