Как сделать активный класс по клику?

Question

помогите пожалуйста. У меня есть <li class="choose_number">1</li> <li class="choose_number">2</li> Как сделать так, что бы при клике активировался класс choose_number-active ?

Answer 1

Согласно документации - Работа с классами и стилями :

Для динамической установки или удаления CSS-классов можно передавать объект в директиву v-bind:class

<div v-bind:class="{ active: isActive }"></div>

Запись выше означает, что наличие класса active будет определяться истинностью параметра isActive

Добавлю только, что вместо параметра isActive вы можете использовать выражение, при истинности которого будет присвоен класс СSS соответствующему элементу

new Vue({
  el: '#app',
  data: () => {
    return {
      activeEl: 0,
    }
  }
})

.choose_number-active {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <ul>
    <li class="choose_number" :class="{'choose_number-active': activeEl===1}" @click="activeEl = 1">1</li>
    <li class="choose_number" :class="{'choose_number-active': activeEl===2}" @click="activeEl = 2">2</li>
  </ul>
  или

  <ul>
    <li v-for="i in 10" class="choose_number" :class="{'choose_number-active': activeEl===i}" @click="activeEl = i">Элемент {{ i }}</li>
  </ul>
</div>

БЛОГ НА HUSL

Как сделать активный класс по клику?

Ответы (1 шт):