vue中星级判断函数
完整代码：
<template>
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。<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>
更多精彩
