在使用 Bootstrap 會用到 Navbar 選單，做到動態選單時候會用到 isActive，要怎麼透過 Vue 綁定到 class 上面?照官方實作可以簡單完成。
需求解法
1
2
3
4
5
6
|
<li class="nav-item">
<a class="nav-link" :class="{active: mode === 'edit'}" aria-current="page" href="javascript:;" @click="mode = 'edit'">編輯</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="{active: mode === 'result'}" href="javascript:;" @click="mode = 'result'">結果</a>
</li>
|
1
2
3
4
5
6
|
export default {
data(){
return {
mode: 'edit',
}
},
|
綁定 HTML Class
物件語法
1
|
<div :class="{ active: isActive }"></div>
|
靜態與動態 Class 結合
1
2
3
4
|
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
|
1
2
3
4
5
6
|
data() {
return {
isActive: true,
hasError: false
}
}
|
結果
1
|
<div class="static active"></div>
|
搭配 computed
1
|
<div :class="classObject"></div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
|
陣列語法
1
|
<div :class="[activeClass, errorClass]"></div>
|
1
2
3
4
5
6
|
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
|
result:
1
|
<div class="active text-danger"></div>
|
在組件上使用
還滿特別的，建議去看官方文件範例:Class 与 Style 绑定 - 在組件上使用 | Vue.js
