Как можно осуществить привязку и отвязку класса в компоненте по клику на него? В JQuery такое делают вроде с помощью toggleClass, подскажите пожалуйста, как тут можно реализовать такую штуку)
Вот такой пример есть:
var items = []
for (var i = 1; i <= 10; i ) {
items.push({
id: i
})
}
new Vue({
el: '#vue',
data: {
items,
selected: false,
}
})
В javascript мы создаем массив элементов, и через цикл заталкиваем им id по значению итератора, ну и создаем объект vue в который передаем в data этот массив, и добавляем свойство selected которое изначально инициализируем false.
<div id="vue">
Option 1 Only one can be selected
v-for="item in items" :class="{highlight:item.id == selected}" @click="selected = item.id">{{item.id}}
<li
В html мы меняем по клику значение селектед на кликнутом элементе, пририсовывая highlight выбранному элементу.
li:hover {
color: #ffea93;
}
li.highlight {
background: yellow;
border: 1px solid black;
padding: 2px;
}
h2 {
margin-bottom: 0px;
}
Стили css, в которых указан цвет который принимают элементы когда наводишь на них курсор мыши и то как должен подсвечиватся элемент при выборе.