运行效果截图：
以下为源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="js/vue.js"></script>
<style type="text/css">
.box div{
background:url("img/off.png");
width:56px;
height:59px;
float:left;
}
.box .active{
background:url("img/on.png");
}
</style>
</head>
<body>
<div id="box" class="box">
<star v-for="n in 5" @mouseenter.native="enter(n)" @mouseleave.native="out()" @click.native="ok(n)" :class="{'active':n<=curIndex}"></star>
</div>
<script>
var star = {
template:"<div></div>"
}
new Vue({
el:"#box",
data:{
curIndex:0, //第一次定义这个curIndex 鼠标当前所在第几个
flag:false
},
components:{
star
},
methods:{
enter(n){
if(!this.flag){
this.curIndex=n;
}
},
out(){
if(!this.flag){
this.curIndex=0;
}
},
ok(n){
this.flag=true;
this.curIndex=n;
}
}
})
</script>
</body>
</html>
图片送给大家，点亮的是on.png 未点亮的是off.png
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
