vue2.0實現前端星星評分功能組件執行個體代碼，vue2.0前端

vue2.0實現前端星星評分功能組件執行個體代碼，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實現前端星星評分功能組件執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！