希望對(duì)你們有用，已經(jīng)自己試過(guò)可以的才發(fā)布出來(lái)的

效果如下：

html：

<template>
<div class="evaStar">
<ul class="star">
<li v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" @click="stars(index)" track-by="index"></li><!--性能優(yōu)化 track-by 數(shù)據(jù)不改變時(shí)不會(huì)重新渲染-->
</ul>
</div>
</template>

?

JS：

<script>
export default{
data(){
return{
score: 4,
}
},
computed:{ //計(jì)算屬性
itemClasses(){
let result = []; // 返回的是一個(gè)數(shù)組,用來(lái)遍歷輸出星星
let score = Math.floor(this.score * 2 ) / 2; // 計(jì)算所有星星的數(shù)量
let hasDecimal = score % 1 !== 0; // 非整數(shù)星星判斷
let integer = Math.floor(score); // 整數(shù)星星判斷
for(let i=0;i<integer;i++){ // 整數(shù)星星使用on
result.push("on"); // 一個(gè)整數(shù)星星就push一個(gè)CLS_ON到數(shù)組
}
if(hasDecimal){ // 非整數(shù)星星使用half
result.push("half"); // 類似

}
while(result.length < 5){// 余下的用無(wú)星星補(bǔ)全,使用off
result.push("off");
}
return result;
}
},
methods:{
stars:function(index){
this.score = index + 1
}
}

}
</script>

?

CSS：

<style>
.evaStar{
float: right;
padding-top: .34rem;
}
.star{
font-size: 0;
}
.star-item{
display: inline-block;
background-repeat: no-repeat;
width: .6rem;
height: .6rem;
margin-left: .27rem;
background-size: 100%;
}
.star-item.on{
background-image: url(../assets/images/on.png);
}
.star-item.half{
background-image: url(../assets/images/half.png);
}
.star-item.off{
background-image: url(../assets/images/off.png);
}
</style>

轉(zhuǎn)載于:https://www.cnblogs.com/mei1234/p/8205640.html

總結(jié)

以上是生活随笔為你收集整理的vue实现星级评价效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。