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 五星评价插件的更多相关文章

  1. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  2. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

  3. 分享一个自己写的vue多语言插件smart-vue-i18n

    前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压 ...

  4. 开发工具:sublime text3安装Vue语法高亮插件

    一.将插件克隆到Sublime的packages目录 1.下载并解压插件(或直接git命令clone),得到vue-syntax-highlight-master文件夹 插件地址:https://gi ...

  5. Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...

  6. Vue实战之插件 sweetalert 的使用

    安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...

  7. jquery 五星评价(图片实现)

    1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  8. [vue]初探vue生态核心插件Vuex

    为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...

  9. Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入

    目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...

随机推荐

  1. vue条形码+二维码

    <template> <section style="height: 100vh;" class="bg"> <div class ...

  2. python语法基础(类)

    一.什么是类? 类是具有相同属性的一类事物 类还有功能和属性,属性就是这类事物的特征,而功能就是它能做什么,也是就是方法或者函数. 在python中类用关键词class来声明 二.类的声明 类的声明方 ...

  3. css悬浮在页面顶端

    .header{ position:fixed; margin-top:; width:%; z-index:; } .body{ position:relative; padding-top:119 ...

  4. vsftp 被动模式配置

    直接复制粘切过来就能用 这里只讲下配置,安装方法可以直接yum 配置文件修改 anonymous_enable=NO #关闭匿名用户 xferlog_file=/var/log/vsftpd.log ...

  5. CIE XYZ

    了解CIE XYZ的来龙去脉,看维基之前,先读这两篇文章: https://medium.com/hipster-color-science/a-beginners-guide-to-colorime ...

  6. 解析Spring第二天

    目的:使用spring中纯注解的方式 前言:同样是使用idea创建一个普通的maven工程(如何创建一个普通的Maven工程可以参考mybatis入门第一天的详解). bean管理类常用的4个注解(作 ...

  7. 阿里云应用上边缘云解决方案助力互联网All in Cloud

    九月末的杭州因为一场云栖大会变得格外火热. 9月25日,吸引全球目光的2019杭州云栖大会如期开幕.20000平米的展区集结数百家企业,为数万名开发者带来了一场前沿科技的饕餮盛宴. 如同往年一样,位于 ...

  8. 计算几何——判线段规范相交+最短路zoj1721

    枚举每个端点,然后i点j点连线作为一条路径,逐一判断这条路径是否可行即可 注意的地方:判一条线段是否可行,需要判其余线段是否和其相交,但是这个相交比较难判(因为会不规范相交),所以将问题转化为墙以外的 ...

  9. 河南理工大学算法协会暑期集训积分赛(二)网络同步赛-Numbers of interval-尺取法

    原题链接:https://hpuoj.com/contest/24/problem/E/ 思路:一般的尺取法,不断更新左端点的值. #include<iostream> #include& ...

  10. hive 总结二

    本文参考:黑泽君相关博客 本文是我总结日常工作中遇到的坑,结合黑泽君相关博客,选取.补充了部分内容. 查询函数(Hive高级) NVL(cloumn,replace_with) 如果cloumn为NU ...