vue綁定行內樣式的寫法

vue綁定行內樣式的寫法

第一種寫法

注意: Style對象的屬性與CSS中使用的屬性幾乎是一一對應的，只是包含連接符的屬性則被替換為無連接符的屬性，並且替換后的連擊符后的單詞第一個字母要大寫，如CSS中的font-size在Style中被替換為fontSize,類似的還有text-align替換為textAlign等等

<div class="myBox" :style="{'width':screenWidth,'fontSize':'20px'}"></div>

第二種寫法

<div :style="styleObj"></div>
data() {
	return {
		styleObj:{
            width:'100px',
            color:'red',
            fontSize:'20px'
        }
	}
}

第三種寫法

<div :style="[styleObj1,styleObj2]"></div>
data() {
	return {
		styleObj1:{
            width:'100px',
            color:'red',
            fontSize:'20px'
        },
        styleObj2:{
            height:'100px'
        }
	}
}