vue实现评分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <style>
        .star-list i{font-style:normal; color:#9f9f9f; cursor:default;}
        .star-list[data-value="0"]>i:nth-child(-n+1){color:#f00;}
        .star-list[data-value="1"]>i:nth-child(-n+2){color:#f00;}
        .star-list[data-value="2"]>i:nth-child(-n+3){color:#f00;}
        .star-list[data-value="3"]>i:nth-child(-n+4){color:#f00;}
        .star-list[data-value="4"]>i:nth-child(-n+5){color:#f00;}
    </style>
</head>
<body>
<div id="root">
    <starlist v-bind:value="5" @input="change"></starlist>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>
    Vue.component("starlist",{
        template:
        '<span class="star-list" :data-value="val">'+
        '  <i class="icon" v-for="i in max" @click="choosed(i)">☆</i>'+
        '<span>',
        data(){
            return {
                val:1
            }
        },
        methods:{
            choosed:function(n){
                var m = this;
                if(m.noEdit)    return;
                m.val = n;
                m.$emit("input",n+1);
            }
        },
        watch:{
            value:function(v){
                var m = this;
                m.val = Math.ceil(v)-1;
            }
        },

        props:{
            name:{
                type:String,
                default:"star"
            },
            max:{
                type:Number,
                default:5
            },
            value:{
                type:Number,
                default:1
            },

            noEdit:{
                default:false
            }
        },

        ready:function(){
            var m = this;
            m.val = Math.ceil(m.value)-1;
        }
    })

    new Vue({
        el:"#root",
        methods:{
            change:function(value){
                console.log("你选择了",value)
            }
        }
    })
</script>
</body>
</html>
vue实现评分

推荐阅读更多精彩内容
