Css 单击Vue.js切换类

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

M
新Vue({
el:“#我的容器”，
数据：{
isActive:错误
},
方法：{
myFilter:function（）{
this.isActive=！this.isActive；
//一些用于过滤用户的代码
}
}
})

此答案与

Vue.js版本2

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

M

道格拉斯回答的其余部分仍然适用（使用

isActive:false

等设置新的Vue实例）

---

相关文档：和

除了NateW的答案之外，如果您的css类名中有连字符，您应该将该类用（单）引号括起来：

M

---

有关此主题的更多信息，请参阅主题。

无需方法：

// html element, will display'active' class if showMobile is true
//clicking on the elment will toggle showMobileMenu to true and false alternatively
<div id="mobile-toggle"
 :class="{ active: showMobileMenu }"
 @click="showMobileMenu = !showMobileMenu">
</div>

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

//html元素，如果showMobile为true，将显示'active'类
//单击elment将交替将ShowMobileNu切换为true和false
//在vue.js应用程序中
数据：{
showMobileMenu：错误
}

我有一个解决方案，允许您检查道具的不同值，因此不同的

元素将变为活动/非活动。使用VUE2语法

<th 
class="initial " 
@click.stop.prevent="myFilter('M')"
:class="[(activeDay == 'M' ? 'active' : '')]">
<span class="wkday">M</span>
</th>
...
<th 
class="initial " 
@click.stop.prevent="myFilter('T')"
:class="[(activeDay == 'T' ? 'active' : '')]">
<span class="wkday">T</span>
</th>



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

  data: {
      activeDay: 'M'
  },

  methods: {
    myFilter: function(day){
        this.activeDay = day;
      // some code to filter users
    }
  }
})

M
...
T
新Vue({
el:“#我的容器”，
数据：{
活动日：“M”
},
方法：{
myFilter:函数（天）{
this.activeDay=天；
//一些用于过滤用户的代码
}
}
})

如果您需要一门以上的课程

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

您可以这样做：

<i id="icon" 
  v-bind:class="{ 'fa fa-star': showStar }"
  v-on:click="showStar = !showStar"
  >
</i> 

data: {
  showStar: true
}

数据：{
真棒
}

注意类周围的单引号

---

多亏了其他人的解决方案。

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

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

---

此示例使用列表：当单击某些li时，它会变为红色

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>

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

小提琴：

newvue({
el:“#fsbar”，
数据：{
isActive:错误
},
方法：{
切换：函数（）{
this.isActive=！this.isActive；
}
}
});
/*
演示风格
*/
@进口”https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
身体{
字体系列：“Poppins”，无衬线；
背景：#fafafa；
}
p{
字体系列：“Poppins”，无衬线；
字体大小：1.1米；
字体大小：300；
线高：1.7em；
颜色：#999；
}
a、 a:悬停，a:聚焦{
颜色：继承；
文字装饰：无；
过渡：均为0.3秒；
}
navbar先生{
填充：15px 10px；
背景：#fff；
边界：无；
边界半径：0；
边缘底部：40px；
盒影：1px1p3pRGBA（0,0,0,0.1）；
}
.导航栏btn{
盒影：无；
大纲：无！重要；
边界：无；
}
.线路{
宽度：100%；
高度：1px；
边框底部：1px虚线#ddd；
利润率：40px0；
}
i、 跨度{
显示：内联块；
}
/* ---------------------------------------------------
边栏样式
----------------------------------------------------- */
.包装纸{
显示器：flex；
对齐项目：拉伸；
}
#边栏{
最小宽度：250px；
最大宽度：250px；
背景#7386D5；
颜色：#fff；
过渡：均为0.3秒；
}
#侧边栏{
最小宽度：80px；
最大宽度：80px；
文本对齐：居中；
}
#侧边栏.active.侧边栏标题h3，#侧边栏.active.CTAs{
显示：无；
}
#侧边栏。激活。侧边栏标题强{
显示：块；
}
#侧栏ul li a{
文本对齐：左对齐；
}
#侧栏。活动ul li a{
填充：20px 10px；
文本对齐：居中；
字号：0.85em；
}
#侧栏。活动ul li a i{
右边距：0；
显示：块；
字号：1.8em；
边缘底部：5px；
}
#侧栏。活动ul a{
填充：10px！重要；
}
#sidebar.active a[aria expanded=“false”]：：before，#sidebar.active a[aria expanded=“true”]：：before{
顶部：自动；
底部：5px；
右：50%；
-webkit转换：translateX（50%）；
-ms转化：translateX（50%）；
转化：translateX（50%）；
}
#边栏。边栏标题{
填充：20px；
背景：#6d7fcc；
}
#侧边栏。侧边栏标题强{
显示：无；
字号：1.8em；
}
#侧栏ul组件{
填充：20px0；
边框底部：1px实心#47748b；
}
#侧栏ul li a{
填充：10px；
字体大小：1.1米；
显示：块；
}
#侧边栏ul li a：悬停{
颜色：#7386D5；
背景：#fff；
}
#侧栏ulli a i{
右边距：10px；
}
#侧栏ul li.active>a，a[aria expanded=“true”]{
颜色：#fff；
背景：#6d7fcc；
}
a[data toggle=“collapse”]{
位置：相对位置；
}
a[aria expanded=“false”]：：before，a[aria expanded=“true”]：：before{
内容：'\e259'；
显示：块；
位置：绝对位置；
右：20px；
字体系列：“字形图标半身人”；
字号：0.6em；
}
a[aria expanded=“true”]：：之前{
内容：'\e260'；
}
乌拉{
字体大小：0.9em！重要；
左侧填充：30px！重要；
背景：#6d7fcc；
}
ul.CTAs{
填充：20px；
}
ul.CTAs a{
文本对齐：居中；
字体大小：0.9em！重要；
显示：块；
边界半径：5px；
边缘底部：5px；
}
a、 下载{
背景：#fff；
颜色：#7386D5；
}
a、 文章：悬停{
背景：#6d7fcc！重要；
颜色：#fff！重要；
}
/* ---------------------------------------------------
内容风格
----------------------------------------------------- */
#内容{
填充：20px；
最小高度：100vh；
过渡：均为0.3秒；
}
/* ---------------------------------------------------
媒体查询
----------------------------------------------------- */
@介质（最大宽度：768px）{
#边栏{
最小宽度：80px；
最大宽度：80px；
文本对齐：居中；
左边距：-80px！重要；
}
a[aria expanded=“false”]：：之前，a[aria expanded=“true”
ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

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

<script lang="ts">

    active:string=''
    myFilter(){
       this.active='active'
    }
</script>

<style>
  .active{
     /***your action***/
   }

</style>    

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

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

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

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

             <nuxt-link
              @click.prevent.native="isDropdwonMenuVisible = !isDropdwonMenuVisible"
              to=""
              :title="item.title"
              :class="[item.cssClasses, {show: isDropdwonMenuVisible}]"
              :id="`navbarDropdownMenuLink-${index}`"
              :aria-expanded="[isDropdwonMenuVisible ? true : false]"
              class="nav-link dropdown-toggle"
              aria-current="page"
              role="button"
              data-toggle="dropdown"
            >
              {{ item.label }}
            </nuxt-link>

data() {
    return {
      isDropdwonMenuVisible: false
    }
  },