Вю.класса JS переключение по клику


Вю.класса JS переключение по клику

16.11.2015 12:22:17 Просмотров 523 Источник

Как переключить класс в 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

Является ответом!
Douglas.Sesar

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
    }
  }
})
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment70754897_33734793
по какой-то причине v-class="active: isActive"аварийно завершает работу моего приложения, но v-bind:class="{ active: isActive }" работает для меня. Надеюсь, что это полезно для кого-то.
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment70784513_33734793
Мой пример взят из версии 0.12
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment72049948_33734793
синтаксис, кажется, все время меняется с vue. В 2.* вы также можете просто сделать:class="..."
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment74003586_33734793
Я делаю это в vue.js-2. Когда я нажимаю на одну строку, active класс применяется ко всем строкам. Я делаю что-то не так?
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment74109712_33734793
вы можете сделать каждую строку ее собственным компонентом, который отвечает за ее собственное свойство isActive
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment84783040_33734793
все примеры для установки активного класса предназначены только для одного элемента, что делать, если бы у меня было несколько I v-for rendered, как тогда я бы передал активный класс на самом последнем щелчке этого списка. <a href="#" @click="switchRoom(room)" class="rooms" :class="{currentRoom: room.isActive}" v-for="(room, index) in allRooms" :key="index">{{ room.name }} </a>
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment86161354_33734793
похоже, я не могу использовать двойной дефис в имени класса с этим методом? например:class="{ click--butonClass: ifTrue }"
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/33734793#comment88952010_33734793
Если имя класса имеет дефис => > v-bind:class="{ 'active-class': isActive }"
NateW

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

https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/42027321#comment74003522_42027321
когда я нажимаю на одну строку, active класс применяется ко всем строкам. Я делаю что-то не так?
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/42027321#comment79863288_42027321
та же проблема здесь, это работает только в том случае, если есть только один кликабельный элемент в компоненте. что делать, если компонент имеет несколько кликабельных элементов?
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/42027321#comment79864792_42027321
Если вы зададите новый вопрос, я могу посмотреть на него. Спасибо
hbulens

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>

Ознакомиться с этой темой более подробно на эту тему.

moabi

08.05.2017 07:28:12

Без необходимости в методе:

// 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
}
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/43852744#comment98509017_43852744
@ConnorLeech <li v-for="(item, index) in items" :key="item.id" v-bind:class="{ active: active == item }" @click="active = item"> Затем добавьте .active {styles}и поместить его в <ul>
bgreater

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

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
}

Обратите внимание на одиночные кавычки " вокруг классов!

Спасибо всем остальным решениям.

Fabian von Ellerts

19.08.2018 11:54:59

Если вам не нужно обращаться к переключателю извне элемента, этот код работает без переменной данных:

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

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

Скрипка:

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

SagitSri

12.05.2019 08:56:49

mostafa ahmed

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>    
https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click/59409678#comment105011802_59409678
Помимо фрагмента кода, пожалуйста, добавьте краткое объяснение того, почему это решает проблему.
Loi Nguyen Huynh

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>

Помочь в развитии проекта:
Закрыть X