<!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实现评分
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 深入解析vue 1实现原理，并实现vue双向数据绑定模型vueImitate，此模型(vueImitate)只适用...
