Вю.класса 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
я хочу применить active
как класс следующим образом:
<th class="initial active" v-on="click: myFilter">
<span class="wkday">M</span>
</th>
Это должно переключаться, т. е. каждый раз, когда его щелкнули, он должен добавить / удалить класс.
Ответы - Вю.класса JS переключение по клику / Vue.js toggle class on click

16.11.2015 02:55:57
Можно было бы сделать так, чтобы активный класс зависел от логического значения данных:
<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
}
}
})

v-class="active: isActive"
аварийно завершает работу моего приложения, но v-bind:class="{ active: isActive }"
работает для меня. Надеюсь, что это полезно для кого-то.


:class="..."

active
класс применяется ко всем строкам. Я делаю что-то не так?

свойство isActive

<a href="#" @click="switchRoom(room)" class="rooms" :class="{currentRoom: room.isActive}" v-for="(room, index) in allRooms" :key="index">{{ room.name }} </a>

:class="{ click--butonClass: ifTrue }"

v-bind:class="{ 'active-class': isActive }"

03.02.2017 06:10:26
Этот ответ актуален для 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

active
класс применяется ко всем строкам. Я делаю что-то не так?



05.04.2017 02:35:16
В дополнение к ответу NateW, если у вас есть дефисы в имени css-класса, вы должны обернуть этот класс в (одинарные) кавычки:
<th
class="initial "
v-on:click="myFilter"
v-bind:class="{ 'is-active' : isActive}"
>
<span class="wkday">M</span>
</th>
Ознакомиться с этой темой более подробно на эту тему.


<li v-for="(item, index) in items" :key="item.id" v-bind:class="{ active: active == item }" @click="active = item">
Затем добавьте .active {styles}
и поместить его в <ul>

07.08.2018 08:56:45
У меня есть решение, которое позволяет вам проверять разные значения опоры, и таким образом различные <th>
станут активными/неактивными. Использование синтаксиса vue 2.
<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
}
}
})

10.08.2018 02:10:12
Если вам нужно больше чем 1 класс
Вы можете сделать это:
<i id="icon"
v-bind:class="{ 'fa fa-star': showStar }"
v-on:click="showStar = !showStar"
>
</i>
data: {
showStar: true
}
Обратите внимание на одиночные кавычки " вокруг классов!
Спасибо всем остальным решениям.

19.08.2018 11:54:59
Если вам не нужно обращаться к переключателю извне элемента, этот код работает без переменной данных:
<a @click="e => e.target.classList.toggle('active')"></a>

06.09.2018 11:44:55
Этот пример использует списки: при нажатии в некоторых 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>
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;
}
Скрипка:

19.12.2019 03:19:13
Попробуй :
<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>


25.12.2019 03:28:03
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
Демонстрация:
new Vue({
el: '#app1'
});
new Vue({
el: '#app2',
data: { active: false }
});
new Vue({
el: '#app3',
data: { active: false }
});
new Vue({
el: '#app4',
data: { active: false }
});
.initial {
width: 300px;
height: 100px;
background: gray;
}
.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- directly manipulation: not recommended -->
<div id="app1">
<button
class="initial"
@click="$event.target.classList.toggle('active')"
>$event.target.classList.toggle('active')</button>
</div>
<!-- binding by object -->
<div id="app2">
<button
class="initial"
:class="{ active }"
@click="active = !active"
>class="initial" :class="{ active }"</button>
</div>
<!-- binding by expression -->
<div id="app3">
<button
:class="'initial ' + (active ? 'active' : '')"
@click="active = !active"
>'initial ' + (active ? 'active' : '')</button>
</div>
<!-- binding with object combined array -->
<div id="app4">
<button
:class="['initial', { active }]"
@click="active = !active"
>['initial', { active }]</button>
</div>