如何单击vue.js切换类?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (64)

如何在vue.js中切换类?

我有以下情况:

        <th class="initial " v-on="click: myFilter">
            <span class="wkday">M</span>
        </th>


        new Vue({
          el: '#my-container',

          data: {},

          methods: {
            myFilter: function(){

              // some code to filter users
            }
          }
        })

当我点击th我想申请active作为一个类别,如下:

        <th class="initial active" v-on="click: myFilter">
            <span class="wkday">M</span>
        </th>

这需要切换,即每次单击时都需要添加/删除类。

你是怎么用vue.js做这件事的?

提问于
用户回答回答于

可以让Active类依赖于布尔数据值:

<th 
    class="initial " 
    v-on="click: myFilter"
    v-class="active: isActive"
>
   <span class="wkday">M</span>
</th>



    new Vue({
      el: '#my-container',

      data: {
          isActive: false
      },

      methods: {
        myFilter: function(){
            this.isActive = !this.isActive;
          // some code to filter users
        }
      }
    })
用户回答回答于

Vue.js version 2

<th 
  class="initial " 
  v-on:click="myFilter"
  v-bind:class="{ active: isActive }"
>
  <span class="wkday">M</span>
</th>

(将新的Vue实例设置为isActive: false(等等)

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动