使用 v-bind 指令去綁定行內樣式，即使用 v-bind:style 或者 :style 的方式去動態綁定行內樣式。

style中直接定義樣式

下面實例中我們將直接在 v-bind:style 屬性中定義樣式，實例如下：html>

學習?VUE?框架

.normal?{font-size:?18px;?font-weight:bold;}

.active?{color:?#26b955;}

.under-line?{border-bottom:?solid?3px?red;}

內聯樣式

var?vm?=?new?Vue({

el:?'#app',

data:?{

activeColor:?'red',

fontSize:?16

}

});

上例中，v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" 語句其實定義了一個對象，該對象中定義了元素的字體顏色和字體大小。而字體顏色和大小的值從 vue 對象的 data 中動態獲取。

style引用vue定義的數據對象

下面實例將演示在 v-bind:style 中引用在 vue 對象 data 中定義的?styleObject 對象。代碼如下：html>

學習?VUE?框架

.normal?{font-size:?18px;?font-weight:bold;}

.active?{color:?#26b955;}

.under-line?{border-bottom:?solid?3px?red;}

直接綁定到一個樣式對象通常更好

var?vm?=?new?Vue({

el:?'#app',

data:?{

styleObject:?{

color:?'blue',

fontSize:?'12px'

}

}

});

style用數組引用多個對象

下面實例演示在 v-bind:style 中使用數組的形式引用多個對象，代碼如下：html>

學習?VUE?框架

.normal?{font-size:?18px;?font-weight:bold;}

.active?{color:?#26b955;}

.under-line?{border-bottom:?solid?3px?red;}

數組語法可以將多個樣式對象應用到同一個元素上

var?vm?=?new?Vue({

el:?'#app',

data:?{

styleObject:?{

color:?'blue',

fontSize:?'12px'

},

styleObject2:?{

fontWeight:?'bold',

border:?'solid?1px?red'

}

}

});

總結

以上是生活随笔為你收集整理的在vue中怎么写行内样式高_vue v-bind绑定行内样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。