vue实现点击某个标签变换颜色

1、v-for循环出多个标签，点击不同元素，css样式随之点中发生改变

　　for循环出多个元素代码：

<view class="paixu-view">
   <block v-for="(item, index) in sortlist" :key="index">
      <view @click="clickPaixu(index)">
          <text :class="num===index? 'activetext':'' ">{{item.name}}</text>
      </view>
   </block>
            
</view>

 

2、js中初始化sortlist循环对象的数据，与点击方法clickPaixu()：

export default{
        data() {
            return {
                sortlist:[
                    {
                        name: "综合排序",
                        screen: "_id",
                        nums: "1"
                    },
                    {
                        name: "起送价最低",
                        screen: "_id",
                        nums: "2"
                    },
                    {
                        name: "配送价最低",
                        screen: "_id",
                        nums: "3"
                    },
                    {
                        name: "人均高到低",
                        screen: "_id",
                        nums: "4"
                    },
                    {
                        name: "人均低到高",
                        screen: "_id",
                        nums: "5"
                    },
                ],
                num: 0,
                
                
            }
        },
        methods:{
            clickPaixu(index){
                console.log("点击：" + index)
                this.num = index;
            }
        }
        
    }

 

3、点击后显示的css样式（选中变色）：

    .activetext{
        color: #FBAE22;
    }

 

 

最终效果：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。