web uniapp设置文字点击变色,点击其他的回复原来颜

发布时间 2023-10-06 00:38:41作者: havelearned
<view class="filter_line">
  <view class="filet_text">
    <view v-for="(item,index) in filterList" :key="index"
      :class="item.order == previous[0].order? 'activation':'' "
      @click="changeSlectColor(item.order,item.color)">{{item.filterName}}
    </view>
 </view>


css

.activation{
  color: rgb(255, 0, 0);
  
}

data

previous: [{

          filterName: '全部',
          color: "#AD343E",
          order: 1,

        }],
filterList: [{
            filterName: '全部',
            color: "#AD343E",
            order: 1,
          },
          {
            filterName: '排行版',
            color: "#AD343E",
            order: 2,
          },
          {
            filterName: '流行',
            color: "#AD343E",
            order: 3,
          }, {
            filterName: '明谣',
            color: "#AD343E",
            order: 4,
          }, {
            filterName: '电子',
            color: "#AD343E",
            order: 5,
          }, {
            filterName: '舞曲',
            color: "#AD343E",
            order: 6,
          },
          {
            filterName: '轻音乐',
            color: "#AD343E",
            order: 7,
          },

        ]
      };
      
      

方法

changeSlectColor(order, color) {
  this.previous = this.filterList.filter(item => {
      return item.order == order
  })
},