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