vue中通过数据绑定为元素设置样式

通过数据绑定可以为元素设置class样式和style样式
一，class样式的设置
------html中的代码

<div id="app">
<!-- 第一种使用方式是直接传递一个数组，这里的的class需要用到v-bind属性 -->
<!-- <h1 :class="['red','thin','Italic']"> 这是一个很大的h1标签，大到你无法想象！！</h1> -->
<!-- 三元表达式的使用 -->
<!-- <h1 :class="['red','thin',flag?'active':'']">这是一个很大的h1标签，大到你无法想象！！</h1> -->
<!-- 在数组中使用对象可以代替三元表达式，且可以提高代码的可读性 -->
<!-- <h1 :class="['red','thin',{'active':flag}]">这是一个很大的h1标签，大到你无法想象！！</h1> -->
<!-- 在数组中直接用v-bind 绑定对象，且这个对象中的属性可以加引号，或者不加引号，属性值为标识符 -->
<h1 :class="{ red:true,thin:true,Italic:true,active:false}">这是一个很大的h1标签，大到你无法想象！！</h1>
</div>
<script>
var vm= new Vue({
el:'#app',
data:{
flag:true

},
});
</script>

二.style样式的设置

<div id="app" >
<h1 style="color:lawngreen;font-weight: 100;">这是一个h1标签</h1>
<!--属性名之间有‘-’要加单引号-->
<h2 :style="styleobj1">这是一个h2标签</h2>
<h2 :style="[styleobj1,styleobj2]">这是一个h2标签</h2>

</div>
<script>
var vm =new Vue({
el:'#app',
data:{
styleobj1:{color:'pink','font-weight':500 },
styleobj2:{'font-style':'italic'}
}
})

</script>