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

1 綁定 class

1.1 對象語法

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

html：

看得見我嘛

js：

var app = new Vue({

el: '#app',

data: {

isHidden:true

}

});

輸出結(jié)果：

看得見我嘛

注意： :class 是 v-bind:class 的簡寫形式。

示例中的類名 hidden 依賴于數(shù)據(jù) isHidden ，當(dāng) isHidden 為 true 時， div 就會擁有類名 hidden，為 false 時就沒有該類名 。

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

html：

看得見我嘛

js：

var app = new Vue({

el: '#app',

data: {

isHidden: false,

isBigger: true

}

});

輸出結(jié)果：

看得見我嘛

當(dāng) :class 中的某個屬性值為 true 時，就會加載對應(yīng)的類名。

當(dāng) :class 的表達(dá)式過長或邏輯復(fù)雜時，我們可以通過計算屬性來綁定。

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é)果：

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

1.2 數(shù)組語法

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

html：

號外！號外

js：

var app = new Vue({

el: '#app',

data: {

strongerClass:'strong',

biggerClass:'bigger'

}

});

輸出結(jié)果：

號外！號外

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

html：

號外！號外

js：

var app2 = new Vue({

el: '#app2',

data: {

isStrong:true,

strongerClass:'strong'

}

});

輸出結(jié)果：

號外！號外

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

html：

號外！號外

js：

var app3 = new Vue({

el: '#app3',

data: {

isStrong:true

}

});

輸出結(jié)果：

號外！號外

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

html：

號外！號外

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é)果：

號外！號外

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

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

1.3 應(yīng)用于組件

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

html：

js：

Vue.component('text-component', {

template: '

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

'

});

var app = new Vue({

el: '#app',

data: {

isStrong: true

}

});

css：

.isStrong{font-weight: bold}

渲染后代碼：

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

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

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

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

html：

馬斯克太空網(wǎng)計劃擴(kuò)大 FCC已允許1.2萬顆衛(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)計劃擴(kuò)大 FCC已允許1.2萬顆衛(wèi)星入軌

總結(jié)

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

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