下面给大家分享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;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-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;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实现前端星星评分功能组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！