以对象方式绑定style属性
<div id="app">
<!-- 在行内属性中书写样式 -->
<div style="color:royalblue ; font-size: 48px;">黄绥睿真帅个鬼</div>
<!-- 把行内属性改造成对象，以对象方式绑定style属性
外部增加{}；属性值改造成字符串；分高改成逗号；属性名到对象名的改变 -->
<div v-bind:style="{color:'red',fontSize:'48px'}">小钟不要脸</div>
<!-- 把属性值改成变量 -->
<!-- 第一个color是样式名，第二个color是变量名，和data中的变量保持一致 -->
<div v-bind:style="{color:color,fontSize:size}">小邹也没用</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
color:'red',
size:'24px'
}
})
</script>
以对象方式绑定class属性
<div id="app">
<button @click="btn">这里</button>
<!-- 想要动态的设置class，也是给一个对象 -->
<!-- 属性值：就是类名 -->
<!-- 属性值：就是布尔值，如果为true，就代表有这个类名：false代表没有 -->
<!-- <div class="box" v-bind:class="{bg:ture}"></div> -->
<!-- 把布尔值转换成变量名，在data中去阐明这个变量 -->
<div class="box" v-bind:class="{bg:isBg}"></div>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
isBg:true,
flag:0
},
methods:{
btn(){
if(this.flag==0){
this.isBg=true
this.flag=1;
}
else{
this .isBg=false;
this.flag=0;
}
}
}
})
</script>
