绑定class
- 第一种方式是直接一个class内部引入多个 用空格隔开
<h1 class="red thin">这是一个很大很大的h1</h1>
- 第二种方式就是数组方式
- 可以直接传递样式的名称通过字符串的形式
- 也可以在使用三目表达式来决定动态样式的绑定
- 也可以嵌套对象来动态绑定
<h1 :class="['thin', 'italic', flag?'active':'', {'active':isActive}]">这是一个很大很大的h1</h1>
- 第三种就是对象形式
- 支持绑定布尔值
- 也支持表达式判断
<h1 :class="{red: true, thin: 1===2, italic: true,active:true}">这是一个很大很大的h1</h1>
绑定style
- 数组形式
- 数组形式里面对象如果用字符串可以写成font-weight形式,但是在对象中一定要修改成驼峰形式
styleObj:{
color:'red',
'font-weight':200
},
styleObj1:{
fontStyle:'italic',
color:'green'
}
<h1 :style="[styleObj,styleObj1]">这是一个style绑定练习</h1>
<h1 :style="{ color:'red','font-weight':200}">这是一个style绑定练习</h1>