mpvue实现星星打分效果

<div class="head-r flex justifyContentCenter">  
    <img class="cang" src="/static/images/icons/nocang.png" @tap="addStar(1)" v-if="activeNum<1"/>  
    <img class="cang" src="/static/images/icons/cang.png" v-if="activeNum>0 && activeNum<=5" @tap="addStar(1)"/>  
    <img class="cang" src="/static/images/icons/nocang.png" @tap="addStar(2)" v-if="activeNum<2"/>  
    <img class="cang" src="/static/images/icons/cang.png" v-if="activeNum>1 && activeNum<=5" @tap="addStar(2)"/>  
    <img class="cang" src="/static/images/icons/nocang.png" @tap="addStar(3)" v-if="activeNum<3"/>  
    <img class="cang" src="/static/images/icons/cang.png" v-if="activeNum>2 && activeNum<=5" @tap="addStar(3)"/>  
    <img class="cang" src="/static/images/icons/nocang.png" @tap="addStar(4)" v-if="activeNum<4"/> 
    <img class="cang" src="/static/images/icons/cang.png" v-if="activeNum>3 && activeNum<=5" @tap="addStar(4)"/> 
    <img class="cang" src="/static/images/icons/nocang.png" @tap="addStar(5)" v-if="activeNum<5"/>  
    <img class="cang" src="/static/images/icons/cang.png" v-if="activeNum===5"/> 
    <span class="praise" v-if="activeNum===5">非常好</span>
    <span class="praise" v-if="activeNum===4">好</span> 
    <span class="praise" v-if="activeNum===3">中等</span>
    <span class="praise" v-if="activeNum===2">一般</span>
    <span class="praise" v-if="activeNum===1">差</span>
</div>
data() {
    return {
      activeNum:0
    };
},
methods: {
    addStar (num) {
      let that = this
      that.activeNum = num
      // console.log(that.activeNum)
    },
}
<style lang="scss" scoped>
@import "./style";
.cang{
  width:32rpx;
  height:32rpx;
  margin-right:20rpx;
  &:last-child{
    margin-right:0
  }
}
</style>