這篇文章主要介紹vue2.0如何實(shí)現(xiàn)前端星星評(píng)分功能組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、柘城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為柘城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

具體代碼如下所示：

<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)">評(píng)價(jià)</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:"數(shù)學(xué)",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:"數(shù)學(xué)",teacher:"鄭...3",title1:3,
zh:[{title:"課堂氛圍",d:0,lastD:0},
{title:"老師水平",d:0,lastD:0},{title:"課后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"數(shù)學(xué)",teacher:"鄭...4",title1:4,
zh:[{title:"課堂氛圍",d:0,lastD:0},
{title:"老師水平",d:0,lastD:0},{title:"課后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"數(shù)學(xué)",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如何實(shí)現(xiàn)前端星星評(píng)分功能組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：vue2.0如何實(shí)現(xiàn)前端星星評(píng)分功能組件
鏈接分享：http://chinadenli.net/article32/pooosc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、網(wǎng)站收錄、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)