Vue是一個(gè)流行的JavaScript框架，被廣泛用于開發(fā)現(xiàn)代Web應(yīng)用程序。Vue提供了許多功能強(qiáng)大的指令，其中包括“v-bind:class”指令，可以根據(jù)表達(dá)式的結(jié)果動(dòng)態(tài)地為元素添加或刪除CSS類。而“v-on:click”指令則綁定了一個(gè)click事件，當(dāng)用戶點(diǎn)擊元素時(shí)觸發(fā)指定的事件處理程序。
<template>
<div v-bind:class="{ active: isActive }" v-on:click="toggleActive">
點(diǎn)我切換
</div>
</template>上述的代碼演示了如何使用“v-bind:class”和“v-on:click”指令完成一個(gè)簡(jiǎn)單的交互效果。當(dāng)用戶點(diǎn)擊
元素時(shí)，會(huì)調(diào)用toggleActive方法，該方法負(fù)責(zé)切換isActive變量的值，以觸發(fā)動(dòng)態(tài)綁定的CSS類。
<script>
export default {
data () {
return {
isActive: false
}
},
methods: {
toggleActive () {
this.isActive = !this.isActive
}
}
}
</script>以上代碼中的Vue組件定義了一個(gè)data函數(shù)，它返回一個(gè)包含isActive變量的對(duì)象。isActive的初始值是false。toggleActive方法則會(huì)在每次調(diào)用時(shí)將isActive的值切換為它的相反值，以實(shí)現(xiàn)互換的效果。
上一篇vue cli 接口
下一篇vue cli 語法