vue购物车五星好评连接对应状态

购物车五星好评，简单易懂，话不多说直接上代码

//html部分
<view class="content">
  <view class="title">五星好评</view>
  <view class="starList">
   <view class="star" v-for="(star, index) in starList" :key="index">
    <image @tap="clickStar(index)" :src="stop > star ? starb : stard" style="width: 50upx; height: 50upx;"></image>
   </view>
   <view class="dynamic">
    <view v-if="stop == 1">很差</view>
    <view v-if="stop == 2">差</view>
    <view v-if="stop == 3">一般</view>
    <view v-if="stop == 4">良好</view>
    <view v-if="stop == 5">非常好</view>
   </view>
  </view>
 </view>
 //js部分
 export default {
 data() {
  return {
   starList: [0, 1, 2, 3, 4],
   stop: 1,
   starb: '../../../static/collect-a.png', //黑星星
   stard: '../../../static/evaluations-a.png' //灰星星
  };
 },
 methods: {
  clickStar(val) {
   this.stop = val + 1;
  }
 }
};