【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】05-Vue.js 中屬性和類名綁定的使用示例
來(lái)源 |?https://xueyuanjun.com/post/21923
我們?cè)凇?/span>【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】01-Vue.js 數(shù)據(jù)綁定的基本實(shí)現(xiàn)和代碼分析》中演示數(shù)據(jù)綁定的時(shí)候，是將 Vue 實(shí)例的模型屬性綁定到了表單輸入元素上，除此之外，還可以將模型數(shù)據(jù)綁定到視圖層 HTML 元素的任意屬性和類名（class）上，綁定表單元素值時(shí)使用的是 v-model 指令，而綁定屬性和類名時(shí)，需要使用 v-bind 指令。接下來(lái)，我們來(lái)給大家簡(jiǎn)單演示下這兩個(gè)功能的使用。
屬性綁定
我們?cè)?vue_learning/basic?目錄下新建一個(gè) HTML 5 文件，將其命名為 bind.html，首先，我們來(lái)演示屬性綁定功能的使用。
我們?cè)?HTML 視圖中新增一個(gè) a 標(biāo)簽元素，通過(guò) v-bind:title 指令將該元素的 title 屬性值與模型屬性的 title 值綁定起來(lái)，然后在 Vue 對(duì)象實(shí)例初始化的時(shí)候設(shè)置模型數(shù)據(jù) title 的值：
<html lang="en"><head><meta charset="UTF-8"><title>屬性和類名綁定title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>head><body><div id="app"><p>屬性綁定：p><a href="https://xueyuanjun.com" v-bind:title="title">學(xué)院君網(wǎng)站a>div><script>var app = new Vue({el: '#app',data: {title: "致力于提供優(yōu)質(zhì)中文編程技術(shù)學(xué)習(xí)資源"}});script>body>html>
注：如果綁定的是其他屬性，則將 v-bind:title 中的 title 替換成對(duì)應(yīng)的屬性名即可。
在瀏覽器中預(yù)覽這個(gè) HTML 文檔，將光標(biāo)移到鏈接上，就可以顯示出 title 屬性中設(shè)置的提示文本了：
說(shuō)明定義在 Vue 對(duì)象中的模型數(shù)據(jù)綁定到視圖層 title 屬性成功，我們可以查看源碼進(jìn)行驗(yàn)證：
v-bind:title 指令中的 v-bind 可以省略，因此下面代碼的效果和上面完全一樣：
<a href="https://xueyuanjun.com" :title="title">學(xué)院君網(wǎng)站a>類名綁定
類名綁定可以看作是屬性綁定的一個(gè)特例，因?yàn)?class 本身是 HTML 元素的 class 屬性，只是 class 屬性通常與 CSS 相關(guān)，所以我們單獨(dú)來(lái)介紹一番。類名綁定和屬性綁定的語(yǔ)法是完全一致的，只是 class 屬性名是固定的，所以對(duì)應(yīng)的指令是 v-bind:class，當(dāng)然，也可以簡(jiǎn)寫(xiě)為?:class。
下面我們來(lái)看一個(gè)示例，還是在 bind.html 中，編寫(xiě)對(duì)應(yīng)的類名綁定代碼如下：
<html lang="en"><head><meta charset="UTF-8"><title>屬性和類名綁定title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script><style>.color-red {color: red;}.color-orange {color: orange;}.color-yellow {color: yellow;}.color-green {color: lawngreen;}.color-aqua {color: aqua;}.color-blue {color: blue;}.color-purple {color: purple;}h1 {width: 120px;border: 3px dotted;text-align: center;}style>head><body><div id="app"><p>屬性綁定：p><a href="https://xueyuanjun.com" :title="title">學(xué)院君網(wǎng)站a><hr><p>類名綁定：p><h1 v-bind:class="curClass">學(xué)院君h1><button v-on:click="toggleClass">換個(gè)顏色button>div><script>// 擴(kuò)展數(shù)組方法支持隨機(jī)獲取元素Array.prototype.getRandomElement = function () {return this[Math.floor(Math.random() * this.length)]};var app = new Vue({el: '#app',data: {title: "致力于提供優(yōu)質(zhì)中文編程技術(shù)學(xué)習(xí)資源",classes: ['color-red','color-orange','color-yellow','color-green','color-blue','color-aqua','color-purple'],curClass: 'color-red'},methods: {toggleClass() {this.curClass = this.classes.getRandomElement();}}});script>body>html>
這個(gè)代碼相對(duì)復(fù)雜一些，我們分開(kāi)來(lái)看，首先定義的是 HTML 視圖：
類名綁定：
學(xué)院君
我們編寫(xiě)了一個(gè) h1 元素，并通過(guò) v-bind:class="curClass"?將其類名和 Vue 模型屬性 curClass 綁定，這樣一來(lái)就可以通過(guò) Vue 對(duì)象來(lái)動(dòng)態(tài)設(shè)置它的類名，這一切換通過(guò)點(diǎn)擊下面的 button 按鈕來(lái)完成，該元素上綁定了點(diǎn)擊事件處理函數(shù) toggleClass。
接下來(lái)，我們來(lái)看對(duì)應(yīng)的 Vue 代碼：
在這段代碼中，首先我們通過(guò) Array.prototype.getRandomElement 為數(shù)組擴(kuò)展了一個(gè)隨機(jī)獲取元素值的 getRandomElement 函數(shù)，然后在 Vue 對(duì)象的模型屬性中定義了 classes 表示 h1 元素上支持切換的 class 類名，以及 curClass 表示當(dāng)前的類名。
最后，在 methods 中定義了點(diǎn)擊事件處理函數(shù) toggleClass，調(diào)用該函數(shù)時(shí)，會(huì)從 classes 數(shù)組中隨機(jī)獲取一個(gè)顏色類名并將其賦值給 curClass，由于數(shù)據(jù)是雙向綁定的，所以 curClass 的值會(huì)同步到 h1 的 class 屬性中。
最后，我們還編寫(xiě)了一段 CSS 樣式代碼讓類名切換以更直觀的方式呈現(xiàn)出來(lái)：
至此，所有代碼都編寫(xiě)好了，我們?cè)跒g覽器中預(yù)覽這個(gè) HTML 文檔，由于 curClass 默認(rèn)值是 color-red，所以 h1 元素的顏色是紅色的：
點(diǎn)擊【換個(gè)顏色】按鈕，就可以切換該元素的顯示顏色了：
多次點(diǎn)擊，則可以隨機(jī)切換文本的顯示顏色：
推薦閱讀
【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】04-Vue.js 中事件監(jiān)聽(tīng)和異步處理的實(shí)現(xiàn)示例
【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】03-Vue.js 列表渲染的基本使用和動(dòng)態(tài)調(diào)整
【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】02-使用 Vue.js Devtools 擴(kuò)展作為 Vue 應(yīng)用調(diào)試工具
【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】01-Vue.js 數(shù)據(jù)綁定的基本實(shí)現(xiàn)和代碼分析
