Vue绑定class和style

绑定class

• 第一种方式是直接一个class内部引入多个 用空格隔开

<h1 class="red thin">这是一个很大很大的h1</h1>

• 第二种方式就是数组方式
  1. 可以直接传递样式的名称通过字符串的形式
  2. 也可以在使用三目表达式来决定动态样式的绑定
  3. 也可以嵌套对象来动态绑定

<!-- 直接传递一个数组 class绑定之后数组内部是一个个的字符串-->
<!-- 也可以使用三目表达式来动态绑定 -->
<!-- 当然也可以嵌套对象的形式来决定是否添加 -->
<h1 :class="['thin', 'italic', flag?'active':'', {'active':isActive}]">这是一个很大很大的h1</h1>

• 第三种就是对象形式
  1. 支持绑定布尔值
  2. 也支持表达式判断

<!-- 对象形式绑定，前面代表要绑定的class后面代表是否绑定的判定值可以传入表达式 -->
<h1 :class="{red: true, thin: 1===2, italic: true,active:true}">这是一个很大很大的h1</h1>

绑定style

• 数组形式
  1. 数组形式里面对象如果用字符串可以写成font-weight形式，但是在对象中一定要修改成驼峰形式

styleObj:{
	color:'red',
	'font-weight':200 //区别于下面的fontStyle
},
styleObj1:{
	fontStyle:'italic',//驼峰
	color:'green'
}

<h1 :style="[styleObj,styleObj1]">这是一个style绑定练习</h1>

• 对象形式

<h1 :style="{ color:'red','font-weight':200}">这是一个style绑定练习</h1>