@kroha3000

Как сделать, что бы при клике изменялось сразу несколько стилей/классов?

К примеру есть код, который меняет стиль вывода списка по клику на кнопку (иконку):

<div id="app">

<button @click="active1 = !active1, active2 = !active2, active3 = !active3">поменять стиль списка</button>

<ul>
  <li>
  <div :class="{ active1 }"></div>
  <div :class="{ active2 }"></div>
  <div :class="{ active3 }"></div>
  </li>
<ul>
</div>


new Vue({
  el: '#app',
  data() {
    return {
      active1: false,
      active2: false,
      active3: false
    }
  }
})


Можно ли его сделать более удобным, что ли?

Возможно ли вывести значения @click в массив? - или глупый вопрос?

или проще и лучше для такой задачи использовать к примеру v-if/v-show тогда на весь <li></li> ?

p.s. сам список <li></li> - выводится из массива.
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
data() {
  return {
    items: [ 'active1', 'active2', 'active3' ],
    active: false,
  };
},

<button @click="active = !active"></button>
...
<div v-for="n in items" :class="{ [n]: active }"></div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы