Vue中的使用样式

使用class样式

1、使用数组的方式

其中对象的属性可带引号也可以不带引号

•       直接传递一个数组，利用v-bind作为数据绑定，v-bind:class="[ 'thin','red']"
•       可以利用数组的方式使用三元表达式；v-bind:class="[ 'thin','red',flag?'active':' ']";
•       利用数组的方式来改变元素的样式,从而代替三元表达式；v-bind:class="[ 'thin','red',{active:flag}]";
•       直接使用对象；v-bind:class="{thin:true,thin:true,active:flag}"

2、使用内联样式

•      直接在元素上通过:style的形式书写对象；v-bind:style="{color:'red',font-weight:'weight'}"
•      将样式对象直接定义到data中，然后直接引用到v-bind:style里；
•      :style中绑定数组，数组中放data中的对象。