- 通过对象方式绑定
style
,key
是css
属性,value
可以是data
变量,也可以是字符串 - 通过数组方式绑定
style
,[ 对象1, 对象2 ]
<div id="app">
<h1 class="title" :style="[ baseStyle, activeStyle ]">{{ name }}</h1>
<h1 class="title" :style="{ color: '#333', font-size: fontSize, backgroundColor: 'red' }">{{ name }}</h1>
</div>
const app = new Vue({
el: "#app",
data() {
return {
name: "沐颖汐",
fontSize: "50px",
baseStyle: {
fontSize: '100px',
color: '#333'
},
activeStyle: {
color: 'red',
backgroundColor: 'bule'
}
}
}
})