在Vue.js 2中,我們可以使用v-bind指令來綁定CSS屬性。
<div v-bind:style="{ color: textColor, fontSize: textSize + 'px' }"></div>
在上面的代碼中,我們使用v-bind:style來指示我們要綁定CSS屬性。在括號內,我們使用對象字面量表示我們要綁定的屬性和值。
在這個例子中,我們綁定了文本顏色和字體大小。請注意,在字體大小值之后,我們添加了字符串“px”,因為字體大小是一個數字而不是像素值。
我們也可以使用計算屬性來動態地綁定CSS屬性。例如,如果我們想根據用戶選擇的主題來更改文本顏色,我們可以這樣做:
<div v-bind:style="{ color: themeColor }"></div>// ...
computed: {
themeColor: function () {
return this.isDarkMode ? 'white' : 'black'
}
}
在上面的代碼中,我們使用計算屬性來返回一個主題顏色的值。這個計算屬性根據用戶選擇的暗模式與否返回“白色”或“黑色”。
然后,我們可以使用v-bind:style將這個計算屬性綁定到文本顏色上,以動態地更改它。