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. 随笔-ansible-4

    触发器: 一个任务同时调用多个触发器: 为远程主机上的用户设置环境变量: 保存前一步命令的输出结果,并保存到foo中: 添加环境变量的另一种方式: 注意:lineinfile模块只适用于修改少量环境变 ...

  2. jenkins深入浅出

    安装: 1.  从官网上下载新版本的Jenkins,https://mirrors.tuna.tsinghua.edu.cn/jenkins/war-stable/2.89.4/jenkins.war ...

  3. vue-router配置子路由

    1.改写App.vue 里面的代码 ,增加路由跳转,增加Hi页面1,Hi页面2的跳转 2.修改HI.vue 里面的内容,增加 <router-view class="aaa" ...

  4. 传统的dom的渲染方式

    DOM渲染的过程大致分为三个阶段: 后端渲染 前端渲染 独立DOM渲染(前后端相结合渲染) 1.后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端D ...

  5. 【JZOJ6389】小w学图论

    description 小w这学期选了门图论课,他在学习点着色的知识.他现在得到了一张无向图,并希望在这张图上使用最多n种颜色给每个节点染色,使得任意一条边关联的两个节点颜色不同. 小w获得一张n个节 ...

  6. 【JZOJ4905】【BZOJ4720】【luoguP1850】换教室

    description 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内容相同的课 ...

  7. 初识Qgis

    折腾了一天,qgis终于能在跟了自己8年的本本上顺利打开了,官网先后下载了3.8和3.4版本的都出现了同样的问题,"could not load qgis_app.dll",goo ...

  8. csp-s模拟9697题解

    题面:https://www.cnblogs.com/Juve/articles/11790223.html 96: 刚一看以为是水题,直接等差数列求和就好了,然后发现模数不是质数,还要1e18*1e ...

  9. springMVC 400 错误

    1. 今天发现一个奇葩的问题, springMVC出现400错误, 查了很久发现是因为一个参数为int型,而前台传得是String. 这是bug么.

  10. 详解Android广播机制

    应用场景(常见的场景1) (1)同一应用具有多个进程的不同组件之间的消息通信 a)不同应用间的组件之间的消息通信 b)与Android系统在特定情况下的通信,如:系统开机,网络变化等 (2)同一应用内 ...