vue组件star开发基于vue-cli

<template>
   <div class="stars">
        <div v-for="(item,ind) in num" :key="ind" 
        :class="{'on':ind<=cur}" 
        @mouseover='enter(ind)'
        @mouseleave="out()"
        @click="ok(ind)"></div>
   </div>
</template>
<script>
    export default{
    name:'Star',
    data(){
        return{
            num:5,
            cur:-1,
            flag:false
        }
    },
    methods:{
        enter(ind){
            if(!this.flag){
                this.cur=ind;
            }
        },
        out(){
            if(!this.flag){
                this.cur=-1;
            }
        },
        ok(ind){
           this.flag=true;
           this.cur=ind; 
        }
    }
    }
</script>
<style scoped>
    .stars div{
           width: 56px;
        height: 59px;
        background: url('../../static/img/off.png') no-repeat;
        float: left;
    }
    .stars .on{
        width: 56px;
        height: 59px;
        background: url('../../static/img/on.png') no-repeat;
    }
</style>