vue實現星級評價效果
希望對你們有用，已經自己試過可以的才發布出來的
效果如下：
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><!--性能優化 track-by 數據不改變時不會重新渲染-->
</ul>
</div>
</template>
JS：
<script>
export default{
data(){
return{
score: 4,
}
},
computed:{ //計算屬性
itemClasses(){
let result = []; // 返回的是一個數組,用來遍歷輸出星星
let score = Math.floor(this.score * 2 ) / 2; // 計算所有星星的數量
let hasDecimal = score % 1 !== 0; // 非整數星星判斷
let integer = Math.floor(score); // 整數星星判斷
for(let i=0;i<integer;i++){ // 整數星星使用on
result.push("on"); // 一個整數星星就push一個CLS_ON到數組
}
if(hasDecimal){ // 非整數星星使用half
result.push("half"); // 類似
}
while(result.length < 5){// 余下的用無星星補全,使用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>
vue實現星級評價效果