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. palindrome 回文 /// Manacher算法

    判断最长不连续回文 #include <bits/stdc++.h> using namespace std; int main() { ]; while(gets(ch)) { ],an ...

  2. 记录一次MySQL数据库CPU负载异常高的问题

    1.起因 某日下午18:40开始,接收到滕讯云短信报警,显示数据库CPU使用率已超过100%,同时慢查询日志的条数有1500条左右. 正常情况下:CPU使用率为30%-40%之间,慢查询日志条数为0. ...

  3. 为kubectl配置别名和命令行补齐

    配置别名 # vim ~/.bashrc 添加 alias k='kubectl' # source ~/.bashrc 配置命令行补齐 # yum install -y bash-completio ...

  4. 继承内部类时使用外部类对象.super()调用内部类的构造方法

    问题简介   今天在看<Java编程思想>的时候,看到了一个很特殊的语法,懵逼了半天--一个派生类继承自一个内部类,想要创建这个派生类的对象,首先得创建其父类的对象,也就是这个内部类,而调 ...

  5. Python学习笔记(二)——列表

    Python学习笔记(二)--列表 Python中的列表可以存放任何数据类型 >>> list1 = ['Hello','this','is','GUN',123,['I','Lov ...

  6. Laravel Illuminate\Http\Exceptions\PostTooLargeException

    出错原因是: 请求的post的数据比 php.ini设定的 post_max_size大的原因 解决方法: 增加php.ini中 post_max_size和upload_max_filesize的设 ...

  7. COGS2356 【HZOI2015】有标号的DAG计数 IV

    题面 题目描述 给定一正整数n,对n个点有标号的有向无环图进行计数. 这里加一个限制:此图必须是弱连通图. 输出答案mod 998244353的结果 输入格式 一个正整数n. 输出格式 一个数,表示答 ...

  8. sublime 3打开中文乱码问题

    首先到官网 https://packagecontrol.io/installation#Simple 下载一个控制台支持的扩展包Package Control.sublime-package 在su ...

  9. 二分图带权匹配-Kuhn-Munkres算法模板 [二分图带权匹配]

    尴尬...理解不太好T T #include<cstdio> #include<cstring> #include<iostream> #include<al ...

  10. mysql做主从配置

    最近想对公司的数据库做个从数据库,除了每天定时备份外,再多出一个同步数据库,双保险,这样也可以用从数据库就行比较耗资源的数据统计. 技术手段最好能记住,然后就是做笔记了,但是每次都查笔记也不好,希望能 ...