完整代码：
<template>
<div>
<div class="rate">
<p>星级：</p>
<div class="star" v-for="(item,index) in stars" :key="index" @click="rating(index)">
<img :src="item.pic" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
stars:[
{pic:'../../../static/staroff.png',active:false},
{pic:'../../../static/staroff.png',active:false},
{pic:'../../../static/staroff.png',active:false},
{pic:'../../../static/staroff.png',active:false},
{pic:'../../../static/staroff.png',active:false}
]，
starNum:0;
}
},
methods{
// 星级评价函数
rating(index){
var total=this.stars.length;//星星总数
var idx=index+1;//代表选的第idx颗星星，也代表显示星星的数量
if(this.starNum==0){//表示页面是初始状态
this.starNum=idx;
for(var i=0;i<idx;i++){
this.stars[i].pic="../../../static/star.png";
this.stars[i].active=true
}
}else{
if(idx==this.starNum){//如果再次点击当前选中的星级，仅取消掉当前星级，保留之前的
for(var i=index;i<total;i++){
this.stars[i].pic="../../../static/staroff.png";
this.stars[i].active=false
}
}
if(idx<this.starNum){// 如果小于当前最高星级，则直接保留当前星级
for(var i=idx;i<this.starNum;i++){
this.stars[i].pic="../../../static/staroff.png";
this.stars[i].active=false
}
}
if(idx>this.starNum){// 如果大于当前星级，则直接选择到该星级
for(var i=0;i<idx;i++){
this.stars[i].pic="../../../static/star.png";
this.stars[i].active=true
}
}
var count=0;//计数器：统计当前有几颗星
for(var i=0;i<total;i++){
if(this.stars[i].active){
count++;
}
}
this.starNum=count;
}
}
}
}
</script>