绑定样式
Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两张方式来实现。
- 绑定内联样式
在Vue实例中定义的初始数据data，可以通过v-bind将样式数据绑定给DOM元素
Vue
<div id="app">
<!-- 绑定样式属性值 -->
<div v-bind:style="{backgroundColor:pink,width:width,height:height}">
<!-- 绑定样式对象 -->
<div v-bind:style="myDiv"></div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
pink:'pink',
width:'100%',
height:'100px',
myDiv:{backgroundColor:'red',width:'100px',height:'100px'}
},
})
</script>- 绑定样式类
样式类即以类名定义元素的样式
CSS
<style>
.box{
background-color: pink;
width: 100%;
height: 200px;
}
.inner{
background-color: red;
width: 100px;
height: 50px;
border: 2px solid white;
}
</style>
<div id="app">
<div v-bind:class = "box">
<div v-bind:class="inner"></div>
<div v-bind:class="inner"></div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
box:'box',
inner:'inner'
}
})
</script>