如何在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>      

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

推荐答案

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

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

Css相关问答推荐

基于子元素的子元素数量的样式元素

如何使搜索框扩展并溢出其他内容

在AND设计令牌上使用不同的主题

如何更改Swiper Navegation默认 colored颜色

两列网格中左列第一个文本正下方的按钮

不明白为什么 div 不均匀并且不填满页面

当滚动量较小时,在滚动问题上动画粘性导航

网格在行方向上的大小不正确

如何让我的 CSS 代码响应小屏幕?

CSS动画移动divs upwords

Tailwind Box-shadow

如何使用 TailwindCSS 禁用环形阴影?

Flexbox 子高度它的内容

创建一条淡出/在各个方向变得透明的线

使用之前和之后为锚标签添加画笔描边效果

在 CSS 或 JavaScript 中反转图像的 colored颜色

Select 器.class.class和.class.class有什么区别?

bootstrap.css 和 bootstrap-theme.css 有什么区别?

如何让 flexbox 在计算中包含填充?

HTML5 和边框