一、vue屬性綁定
在vue中，是通過(guò)v-bind 屬性綁定來(lái)實(shí)現(xiàn)給元素綁定style樣式。
其中有兩種方式，一種是通過(guò)綁定class類(lèi)綁定樣式，另一種是通過(guò)內(nèi)聯(lián)樣式來(lái)實(shí)現(xiàn)樣式的綁定。
二、綁定class樣式
1. 數(shù)組<h1 :class="['red', 'thin']">這是一個(gè)邪惡的H1</h1>2. 數(shù)組中使用三元表達(dá)式<h1 :class="['red', 'thin', isactive?'active':'']">這是一個(gè)邪惡的H1</h1>
3. 數(shù)組中嵌套對(duì)象
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個(gè)邪惡的H1</h1>4. 直接使用對(duì)象<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個(gè)邪惡的H1</h1>
<style> .red { color: red; } .thin { font-weight: 200; } .italic { /*字體傾斜*/ font-style: italic; } .active { /*字符間距*/ letter-spacing: 0.5em; }</style><body> <div id='app'> <!-- v-bind：等同于： --> <!-- 第一種使用方式，直接傳遞一個(gè)數(shù)組，注意： 這里的 class 需要使用 v-bind 做數(shù)據(jù)綁定 --> <h3 v-bind:class=['red','thin']>今天永遠(yuǎn)比昨天更好</h3> <!-- 在數(shù)組中使用三元表達(dá)式 --> <h3 v-bind:class=['red','thin',flag?'active':'']>今天永遠(yuǎn)比昨天更好</h3> <!-- 在數(shù)組中使用 對(duì)象(即鍵值對(duì)的方式)來(lái)代替三元表達(dá)式，提高代碼的可讀性 --> <h3 v-bind:class=['red','thin',{'active':flag}]>今天永遠(yuǎn)比昨天更好</h3> <!-- 在為 class 使用 v-bind 綁定 對(duì)象的時(shí)候，對(duì)象的屬性是類(lèi)名，由于 對(duì)象的屬性可帶引號(hào)，也可不帶引號(hào)，所以 這里我沒(méi)寫(xiě)引號(hào)； 屬性的值 是一個(gè)標(biāo)識(shí)符 --> <h3 :class="classObj">今天永遠(yuǎn)比昨天更好</h1> </div> </body><script src="vue-2.4.0.js"></script><script> var vm = new Vue({ el:'#app', data:{ flag:true, classObj:{ red: true, thin: true, italic: false, active: false } } })</script></html>三、綁定內(nèi)聯(lián)樣式
1. 直接在元素上通過(guò) `:style` 的形式，書(shū)寫(xiě)樣式對(duì)象<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個(gè)善良的H1</h1>2. 將樣式對(duì)象，定義到 `data` 中，并直接引用到 `:style` 中 在data上定義樣式：data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }} 在元素中，通過(guò)屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中：<h1 :style="h1StyleObj">這是一個(gè)善良的H1</h1>3. 在 `:style` 中通過(guò)數(shù)組，引用多個(gè) `data` 上的樣式對(duì)象 在data上定義樣式：data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, h1StyleObj2: { fontStyle: 'italic' }} 在元素中，通過(guò)屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中：```<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個(gè)善良的H1</h1>?
來(lái)源：https://www.icode9.com/content-4-658201.html聯(lián)系客服
