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

Question

[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> - выводится из массива.

Answer 1

[0xD34F]

data: () => ({
  items: [ 'active1', 'active2', 'active3' ],
  active: false,
}),

<button @click="active = !active"></button>
...
<div v-for="n in items" :class="{ [n]: active }"></div>

Comments

[kroha3000]

Спасибо, гораздо удобнее.