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


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

  for循环出多个元素代码:

class="paixu-view">
   for="(item, index) in sortlist" :key="index">
      "clickPaixu(index)">
          class="num===index? 'activetext':'' ">{{item.name}}
      
   
            

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

最终效果:

相关