vue2.0实现前端星星评分功能组件实例代码

下面给大家分享vue 2.0实现星星评分组件，代码很简单，一起看看吧！

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<template id=\"pingJia\">
<div>
<ul>
<li :class=\"{li1:1,bg1:index%2}\" v-for=\"(value,index) in list\"><span class=\"stu_span1\">
{{value.classs.major}}</span>
<span class=\"stu_teacher\">任课老师：{{value.classs.teacher}}</span>
<div v-for=\"(item,index1) in value.classs.zh\" class=\"stu_div\" :id=\"index\">
<span class=\"stu_title\">{{item.title}}</span>
<span class=\"stu_bgstar\" :id=\"index1\">
<span class=\"stu_bgstar1\" :title=\"value.classs.title1\"></span>
<span class=\"stu_bgstar1\" :title=\"value.classs.title1\"></span>
<span class=\"stu_bgstar1\" :title=\"value.classs.title1\"></span>
<span class=\"stu_bgstar1\" :title=\"value.classs.title1\"></span>
<span class=\"stu_bgstar1\" :title=\"value.classs.title1\"></span>
</span>
<span class=\"stu_bgstar2\" @mousemove=\"pingjia($event)\" :title=\"value.classs.title1\" 
@click=\"pingjia1($event)\" @mouseleave=\"pingjia2($event)\"></span>
<span>{{item.lastD}}</span>
</div>
</li>
<button class=\"but1\" @click=\"pingjia3($event)\">评价</button>
</ul>
</div>
</template>
<style>
　
.li1{
width: 1200px;
/*height: 330px;*/
color: #f60;
border: 1px solid #000000;
font-size: 20px;
line-height: 50px;
}
　
.bg1{
background: #00A2D4;
}
.but1{
width: 200px;
height: 40px;
font-size: 25px;
float: right;
margin: 5px 5px;
}
.stu_span1{
float: left;
margin: 0px 25px;
}
.stu_teacher{
float: left;
}
.stu_div{
float: left;
width: 1000px;
height: 50px;
}
.stu_title{
float: left;
}
.stu_bgstar{
width: 250px;
height: 50px;
float: left;
margin-left:500px;
/*background: url(../image/star.png);*/
background-size: 50px 50px;
}
.stu_bgstar1{
width: 50px;
height: 50px;
float: left;
background: url(../image/star.png);
background-size: 50px 50px;
margin-left: 0px;
}
.stu_bgstar2{
width: 250px;
height: 50px;
float: left;
/*background: url(../image/star.png);*/
/*background-size: 50px 50px;*/
margin-left: -250px;
opacity: 0;
}
.stu_bgstar3{
background: url(../image/star1.png);
background-size: 50px 50px;
}
.stu_li_text{
width: 95%;
height: 100px;
border: 1px solid #000000;
resize: none;
}
</style>
<script>
　　export default{
　　　　data(){
　　　　　　return{
　　　　　　　　
list:[{classs:{major:\"数学\",teacher:\"郑...0\",title1:0,
zh:[{title:\"课堂氛围\",d:0,lastD:0},
{title:\"老师水平\",d:0,lastD:0},{title:\"课后布置\",d:0,lastD:0}
],text:\"好\"}},
{classs:{major:\"语文\",teacher:\"郑...1\",title1:1,
zh:[{title:\"课堂氛围\",d:0,lastD:0},
{title:\"老师水平\",d:0,lastD:0},{title:\"课后布置\",d:0,lastD:0}
],text:\"好\"}},
{classs:{major:\"英语\",teacher:\"郑...2\",title1:2,
zh:[{title:\"课堂氛围\",d:0,lastD:0},
{title:\"老师水平\",d:0,lastD:0},{title:\"课后布置\",d:0,lastD:0}
],text:\"好\"}},
{classs:{major:\"数学\",teacher:\"郑...3\",title1:3,
zh:[{title:\"课堂氛围\",d:0,lastD:0},
{title:\"老师水平\",d:0,lastD:0},{title:\"课后布置\",d:0,lastD:0}
],text:\"好\"}},
{classs:{major:\"数学\",teacher:\"郑...4\",title1:4,
zh:[{title:\"课堂氛围\",d:0,lastD:0},
{title:\"老师水平\",d:0,lastD:0},{title:\"课后布置\",d:0,lastD:0}
],text:\"好\"}},
{classs:{major:\"数学\",teacher:\"郑...5\",title1:5,
zh:[{title:\"课堂氛围\",d:0,lastD:0},
{title:\"老师水平\",d:0,lastD:0},{title:\"课后布置\",d:0,lastD:0} 
],text:\"好\"}}]
　　　　　　}
　　　　},
methods:{
　　　　
pingjia($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
let a = parseInt($event.offsetX/250*100);
let c = parseFloat($event.offsetX/50);
this.list[wei].classs.zh[b].d = Math.ceil(c);
this.list[wei].classs.title1 = a;
for(let i = 0;i<5;i++){
if(i<this.list[wei].classs.zh[b].d){
$event.target.previousElementSibling.children[i].classList.add(\'stu_bgstar3\'); 
}
else{
$event.target.previousElementSibling.children[i].classList.remove(\'stu_bgstar3\'); 
}
}
if(a==0){
$event.target.previousElementSibling.children[0].classList.remove(\'stu_bgstar3\'); 
}
},
pingjia1($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
this.list[wei].classs.zh[b].lastD = this.list[wei].classs.zh[b].d;
},
pingjia2($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
for(let i = 0;i<5;i++){
if(i<this.list[wei].classs.zh[b].lastD){
$event.target.previousElementSibling.children[i].classList.add(\'stu_bgstar3\'); 
}
else{
$event.target.previousElementSibling.children[i].classList.remove(\'stu_bgstar3\'); 
}
}
},
pingjia3($event){
console.log(this.list[0].classs.text);
}
}
　　
}
</script>

以上所述是小编给大家介绍的vue2.0实现前端星星评分功能组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！