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;
    }

 

 

最終效果：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。