切换样式

2020-03-28  本文已影响0人  一枚小菜

用vue写公众号时的小技巧:
我们遍历数组的时候想要点击的时候切换样式,可以用:class来做,:class="['a',{'b':index==num}]",set方法传index过去,然后赋值给num,如果index==num时,使用b样式,否则使用a样式

   <div class="head">
      <div :class="['head_t',{'head_tt':index==num}]" v-for="(item,index) in list"
           :key="index" @click="set(index)">{{item.name}}
      </div>
    </div>
  data() {
      return {
        num: 0,
        list: [
          {name: '全部'},
          {name: '待付款'},
          {name: '待收货'},
          {name: '待安装'},
          {name: '待评价'},
        ],
}
   methods: {
      set(index) {
        console.log(index)
        this.num = index
      }
    }
上一篇 下一篇

猜你喜欢

热点阅读