使用vue实现类似电商的五星评价,如图:
下载两个图片:(on.png)和(off.png)
通过修改元素的class名来切换背景图
引用vue.js文件
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
html代码:
绑定鼠标进入、鼠标离开、鼠标点击事件。
:class=" { ' on ' : cur >= n } " 含义是当cur >= n成立的时候把 on 赋给元素的 class 属性
<div id="box"> <div v-for="n in 5" @mouseenter="enter(n)" @mouseleave="leave()" @click="Selected(n)" :class="{'on':cur>=n}"></div> </div>
css代码:
#box .on{ background: url('img/on.png') no-repeat; } #box div{ width: 56px; height: 59px; float: left; background: url('img/off.png') no-repeat; }
js代码:
var vm = new Vue({ el : '#box', data : { cur : -1, flag : false //鼠标点击后变成true,鼠标进入进出事件就不会改变背景图 }, methods : { enter(idx){ if(!this.flag){ this.cur = idx; } }, leave(){ if(!this.flag){ this.cur = -1; } }, Selected(n){ this.flag = true; this.cur = n; } } });