Vue中样式--class/style

第一种:

传递一个数组，这里的class需要使用v-bind的数据绑定;

hello

第二种:

在数组中使用三元表达式;

hello
    

data() {
  return {
       flag:true 
   }}

第三种:

在数组中使用对象来代替三元表达式，来提高代码的可读性;

hello

在为class使用v-bind绑定对象时候，对象的属性是一个类名，由于对象的属性可以带引号，也可以不带，属性的值是一个标识符;

hello
    
 data() {
  return {
       flag:true ,
      classObj:[red:true,size:true,acitve:true]
   }}

vue中样式是动态绑定style,对象是不需要键值对的集合。

第一种:

直接在标签上使用

hello

第二种:

将键值对的对象写在data中，直接的动态绑定;

hello
    

 data() {
  return {
       flag:true ,
       classObj:[red:true,size:true,acitve:true],
       styleObj1:{color:'red',font-size:24px}
   }}

第二种:

多个键值对对象，使用数组方式，依次写入;

hello
    

data() {
  return {
       flag:true ,
       classObj:[red:true,size:true,acitve:true],
       styleObj1:{color:'red',font-size:24px},
       styleObj2:{background:'green'}
   }}