vue实现五星评价（vue小应用）

使用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;
        }
    }
});

转载于:https://www.cnblogs.com/luowenshuai/p/9379534.html