1時間5クラス一覧
スタイル配列 classList を直接取得し、スタイルを追加または変更します。
<a id="todo" class="todo">{
{
todo.key }}</a>
document.getElementById("todo").classList.add("done");
.todo{
color: aqua;
}
.done{
color:blue;
}
2 動的バインディング
データ：
valueList: [
{
key: '学习',
check: true
},
{
key: '游戏',
check: false
}
]
コード:
データ内の check 属性に基づいてスタイルを動的に選択します
<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;
}
checkがtrueの場合はdoneスタイル、
checkがfasleの場合はtodoスタイルを使用します。