How to make multiple styles/classes change on click?

Question

Vue.js

For example, there is a code that changes the style of the list output by clicking on a button (icon):

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

Can it be made more convenient, or what?
Is it possible to output @click values ​​to an array? - or a stupid question?
or is it easier and better for such a task to use, for example, v-if / v-show then for the whole <li></li>?
ps the list itself <li></li>- output from the array.

Answer 1

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

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