vue中绑定style样式的方式

vue中绑定样式的方式有多种 下面就来看看吧
开始之前先准备一些样式
css样式

1.直接绑定 ：calss='activeClass’

    
    

        
        
hanpy new Year
 
    

    

2.对象语法
:class="{‘属性名’：‘属性值’}" 属性名就是生效的类名 值为布尔值，true生效，false不生效
直接绑定一个对象 :class=“aa” aa 是data中的一个属性： aa:{“blue”:true,“big”:false}
也可以通过计算属性返回一个对象。
推荐的用法： 如果绑定的类名比较少，可以直接绑定对象，如果比较多，建议将对象写在data中，如果涉及到逻辑运算，可以用计算属性返回一个对象。

        
        
hanpy new Year
 
         
hanpy new Year
 
        
hanpy new Year
 
    

    

3.数组语法 :class=’[]'

4.数组+对象

        
happy new Year
    

    

通过vue来控制样式 style
1.对象语法： :style={样式名:‘样式值’} 样式名如果有-，则改成驼峰式命名。
:style=“obj” 样式值可以是data中的一个变量。
代码

    
happy new year
     
happy new year
  

  

2.计算属性 返回一个样式对象。

 

    
happy new year
  

  

3.数组语法 可以将多个样式对象写在同一个数组中。

 

    
happy new year