·style是HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<div id=“app”>
//绑定对象
<p style=“width: 100px“ :style=“styleObj”></p>
</div>
<script src=“lib/vue.js”></script>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
styleObj: {
// width: ‘200px’,
height: ‘200px’,
backgroundColor: ‘red’,
‘font-size’: ‘30px’
}
}
});
</script>
</body>
</html>
·当我们希望给元素绑定多个样式对象时，可以设置为数组。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<div id=“app”>
<p :style=“[baseStyle, styleObj1]”>第一个 p 标签</p>
<p :style=“[baseStyle, styleObj2]”>第二个 p 标签</p>
</div>
<script src=“lib/vue.js”></script>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
// 公共样式
baseStyle: {
width: ‘100px’,
height: ‘100px’
},
styleObj1: {
backgroundColor: ‘red’
},
styleObj2: {
backgroundColor: ‘blue’
}
}
});
</script>
</body>
</html>
