美文网首页
切换样式

切换样式

作者: 一枚小菜 | 来源:发表于2020-03-28 15:44 被阅读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
          }
        }
    

    相关文章

      网友评论

          本文标题:切换样式

          本文链接:https://www.haomeiwen.com/subject/urpyuhtx.html