点击时Vue.js切换类

Question

你如何在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中做到这一点的？

Answer 1

无需方法:

// html element
<div id="mobile-toggle"
 v-bind:class="{ active: showMobileMenu }"
 v-on:click="showMobileMenu = !showMobileMenu">
</div>

//in your vue.js app
data: {
    showMobileMenu: false
}

Answer 2

您可以让活动类依赖于布尔数据值:

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

Answer 3

这个答案相关 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).

相关文档:https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax和https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

Answer 4

如果您不需要从元素外部访问切换,则此代码在没有数据变量的情况下工作:

<a @click="e => e.target.classList.toggle('active')"></a>

Answer 5

1.

@click="$event.target.classList.toggle('active')"

2.

:class="{ active }"
@click="active = !active"

3.

:class="'initial ' + (active ? 'active' : '')"  
@click="active = !active"

4.

:class="['initial', { active }]"  
@click="active = !active"

参考链接：https : //vuejs.org/v2/guide/class-and-style.html

演示：

@click="$event.target.classList.toggle('active')"

:class="{ active }"
@click="active = !active"

:class="'initial ' + (active ? 'active' : '')"  
@click="active = !active"

Answer 6

此示例使用列表：在某些位置单击时，它变为红色

的HTML：

<div id="app">
  <ul>
    <li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>   
  </ul>
</div>

JS：

var app = new Vue({
  el:"#app",
  data:{
    lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

的CSS

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

小提琴：

https://jsfiddle.net/w37vLL68/158/

Answer 7

除了NateW的答案外，如果CSS类名称中包含连字符，则应将该类包装在（单引号）内：

<th 
  class="initial " 
  v-on:click="myFilter"
  v-bind:class="{ 'is-active' : isActive}"
>

 <span class="wkday">M</span>
 </th>

有关该主题的更多信息，请参见本主题。