1 h5 classList
Get the style array classList directly and add or modify the style.
<a id="todo" class="todo">{
{
todo.key }}</a>
document.getElementById("todo").classList.add("done");
.todo{
color: aqua;
}
.done{
color:blue;
}
2 Dynamic binding
data:
valueList: [
{
key: '学习',
check: true
},
{
key: '游戏',
check: false
}
]
Code:
Dynamically select a style based on the check attribute in the data
<ul>
<li v-for="todo in valueList" :key="todo.key">
<a :class="{'todo': !todo.check, 'done': todo.check}">{
{
todo.key }}</a>
</li>
</ul>
.todo{
color: aqua;
}
.done{
color: black;
}
When check is true, use done style.
When check is fasle, use todo style.