在數(shù)據(jù)綁定中，最常見(jiàn)就是動(dòng)態(tài)綁定元素的 class 或內(nèi)聯(lián)樣式 style 咯，它們也是 HTML 的屬性，所以可以使用 v-bind 指令 。

1 綁定 class

1.1 對(duì)象語(yǔ)法

使用 v-bind:class 屬性，實(shí)現(xiàn)動(dòng)態(tài)切換 class。

html：

看得見(jiàn)我嘛

js：

var app = new Vue({

el: '#app',

data: {

isHidden:true

}

});

輸出結(jié)果：

看得見(jiàn)我嘛

注意： :class 是 v-bind:class 的簡(jiǎn)寫(xiě)形式。

示例中的類(lèi)名 hidden 依賴(lài)于數(shù)據(jù) isHidden ，當(dāng) isHidden 為 true 時(shí)， div 就會(huì)擁有類(lèi)名 hidden，為 false 時(shí)就沒(méi)有該類(lèi)名 。

我們也可以一次傳入多個(gè)屬性，而且 :class 可以和常規(guī)的 class 同時(shí)使用。

html：

看得見(jiàn)我嘛

js：

var app = new Vue({

el: '#app',

data: {

isHidden: false,

isBigger: true

}

});

輸出結(jié)果：

看得見(jiàn)我嘛

當(dāng) :class 中的某個(gè)屬性值為 true 時(shí)，就會(huì)加載對(duì)應(yīng)的類(lèi)名。

當(dāng) :class 的表達(dá)式過(guò)長(zhǎng)或邏輯復(fù)雜時(shí)，我們可以通過(guò)計(jì)算屬性來(lái)綁定。

html：

js：

var app2 = new Vue({

el: '#app2',

data: {

isHidden: false,

isBigger: true

},

computed: {

customClasses: function () {

return {

display: !this.isHidden,

'bigger-text': !this.isHidden && this.isBigger

}

}

}

});

輸出結(jié)果：

注意：如果樣式名稱(chēng)帶有 -，那么必須加上單引號(hào)(示例中的 bigger-text)才能被正確識(shí)別。

1.2 數(shù)組語(yǔ)法

也可以使用數(shù)組語(yǔ)法，給 :class 綁定一個(gè) class 數(shù)組。

html：

號(hào)外！號(hào)外

js：

var app = new Vue({

el: '#app',

data: {

strongerClass:'strong',

biggerClass:'bigger'

}

});

輸出結(jié)果：

號(hào)外！號(hào)外

數(shù)組中的元素也可以使用三元表達(dá)式來(lái)計(jì)算

html：

號(hào)外！號(hào)外

js：

var app2 = new Vue({

el: '#app2',

data: {

isStrong:true,

strongerClass:'strong'

}

});

輸出結(jié)果：

號(hào)外！號(hào)外

當(dāng)需要設(shè)置的 class 很多時(shí)，我們可以在數(shù)組語(yǔ)法的基礎(chǔ)上使用對(duì)象語(yǔ)法，從而簡(jiǎn)化表達(dá)式，讓代碼變得更易維護(hù)。

html：

號(hào)外！號(hào)外

js：

var app3 = new Vue({

el: '#app3',

data: {

isStrong:true

}

});

輸出結(jié)果：

號(hào)外！號(hào)外

也可以在 computed 或 methods 中返回需要設(shè)定的數(shù)組。

html：

號(hào)外！號(hào)外

js：

var app4 = new Vue({

el: '#app4',

data: {

size: 'small',

isGreen: true

},

computed: {

btnClass: function () {

return [

'btn',

{

['btn-' + this.size]: this.size !== '',

['btn-green']: this.isGreen

}

];

}

}

});

輸出結(jié)果：

號(hào)外！號(hào)外

注意： 上述示例使用了 ECMAScript 6 語(yǔ)法，所以在 webStorm 中需要進(jìn)行設(shè)置(Setting → JavaScript → 選擇 ECMAScript 6 )否則會(huì)出現(xiàn)紅色波浪線(xiàn)哦：

在業(yè)務(wù)中會(huì)經(jīng)常會(huì)利用計(jì)算屬性為元素動(dòng)態(tài)設(shè)置類(lèi)名，尤其是在編寫(xiě)可復(fù)用的組件時(shí)。所以在開(kāi)發(fā)過(guò)程中，如果表達(dá)式較長(zhǎng)或者邏輯較為復(fù)雜，建議優(yōu)先使用計(jì)算屬性哦O(∩_∩)O~

1.3 應(yīng)用于組件

如果直接在自定義組件中使用 class 或 :class，那么樣式規(guī)則就會(huì)直接應(yīng)在這個(gè)組件的根元素上。

html：

js：

Vue.component('text-component', {

template: '

不懂基因測(cè)序的學(xué)霸不是好的人工智能公司 CEO

'

});

var app = new Vue({

el: '#app',

data: {

isStrong: true

}

});

css：

.isStrong{font-weight: bold}

渲染后代碼：

不懂基因測(cè)序的學(xué)霸不是好的人工智能公司 CEO

這種方式僅適用于把樣式應(yīng)用于自定義組件的根元素。如果需要給自定義組件中的子元素設(shè)置樣式，我們可以使用組件的 props 來(lái)實(shí)現(xiàn)。

2 綁定內(nèi)聯(lián)樣式

也可以使用 v-bind:style 或 :style 直接給 HTML 元素綁定樣式，它也有對(duì)應(yīng)的對(duì)象語(yǔ)法與數(shù)組語(yǔ)法。

html：

馬斯克太空網(wǎng)計(jì)劃擴(kuò)大 FCC已允許1.2萬(wàn)顆衛(wèi)星入軌

js：

var app = new Vue({

el: '#app',

data: {

border:{

border:'1px solid #00F',

textShadow:'0 0 .3em gray'

}

}

});

因?yàn)?JS 屬性不支持短橫分隔命名，所以我們這里使用 CSS 也支持的駝峰命名法。

渲染后代碼：

馬斯克太空網(wǎng)計(jì)劃擴(kuò)大 FCC已允許1.2萬(wàn)顆衛(wèi)星入軌

總結(jié)

以上是生活随笔為你收集整理的在vue中怎么写行内样式高_说说在 Vue.js 中如何绑定样式（class 或 style）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。