属性绑定样式class
<!-- 第一种方式,直接传递一个数组;注意v-bind绑定 --><br><br> <p :class = "['red','thin']">vue使用数组 </p>
<!-- 在数组中使用三元表达式 --><br><br> <p :class = "['red','thin' , flag?'active':'italic']">vue使用数组,三元表达式 </p>
<!-- 在数组中使用对象来代替三元表达式 --><br><br> <p :class = "['red','thin' , {'active' : true}]">数组中使用对象来代替三元表达式</p>
<!--在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名, 对象的属性可带引号,也可不带引号, 属性的值 是一个标识符--><br><br> <p :class = "{red:true,thin:true,active:true}">vue数组中使用对象</p><br>也可以直接在data中写一个属性来替代上述对象
属性绑定样式style
<!-- 对象就是无序键值对的集合 --><br><br>//第一种方式<br> <!-- <h1 :style="styleObj1">这是一个h1</h1> --><br>//第二种方式<br><h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1><br><br> data: {<br> styleObj1: { color: 'red', 'font-weight': 200 },<br> styleObj2: { 'font-style': 'italic' }<br> }<br>