<style>
.textColor {
color: red;
}
.text-font {
font-size: 24px;
}
</style>
<div id="app">
<!--给予v-bind:class=根据类名对应data中的对象属性,来赋予class-->
<p :class="{textColor:styleClass.text_color,'text-font':styleClass.text_font}">{{msg}}</p>
<!-- 在data中定义类名:布尔值的性质来给予类-->
<p :class="styleObj">{{msg}}</p>
<!--在计算属性中,可以进行简单的判断,来给予其类-->
<p :class="classObj">{{msg}}</p>
<!--可以只用数组形式,来直接定义与间接定义其类-->
<p :class="[textcolor,{'text-font':styleClass.text_font}]">{{msg}}</p>
</div>
<script>
new Vue({
data:{
msg:123123132,
error:null,
isColor:true,
styleClass:{
'text_color':true,
'text_font':false,
},
styleObj:{
textColor:true,
'text-font':true,
}
},
computed:{
classObj:function () {
return {
textColor:this.isColor
}
}
}
}).$mount('#app');
</script>
绑定内联样式
和绑定类名类似,可以使用对象绑定,数组绑定与计算属性绑定
:style='xxxx'
像transform这种C3需要兼容的,Vue会自动侦测并添加(-webkit,-ms...)
多重值
简单说就是css样式后的兼容写法
<div :style="{dispaly:['-webkit-box','-ms-flexbox','flex']}"></div>