Vue點擊動態添加Class

1.先在data裏增加一個變量,用來儲存當前點擊的元素

    data() {
      return {
        activeClass: -1,// 0爲默認選擇第一個,-1爲不選擇
         list: [
          {title: '全網搜索(100w+)'},
          {title: '優惠推薦(包郵10w+)'},
        ],
      }
    },

2.在Template裏面的代碼,切記在click方法裏面要傳k

 <el-row class="list">
      <el-col :span="12" v-for="(v,k) in list" :key="k" :class="activeClass ==k?'active':''">
      <span @click="IsActive(k)">{{v.title}}</span>
      </el-col>
    </el-row>

3.CSS代碼

.active {
    border-bottom: 1px solid #FE4520;
    color: #FE4520;
  }

4.methods代碼

    methods: {
      IsActive(k) {
        this.activeClass = k;
      }
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章