Vue中的样式绑定

我们将样式绑定分为两种：一种是通过style绑定，一种是通过class绑定

样式绑定适用于 切换效果的实现，小规模用style，大规模用class

style绑定样式

这里需要用到v-bind指令，绑定style属性。在绑定的:style=" "引号中有三种写法。

第一种：直接写对象字面量，对象的属性值取data中的数据。

代码展示：

        点击切换文字颜色
        
测试文字
    
    

第一个color是要改变的属性，第二个是我们data中设置的属性名，对应取数据。如果我们将style中第二个参数加上引号那么就会变成字符串，直接就把作为属性值，就如我们直接改为"blue",标签能得内容就变为蓝色。

第二种在data中声明对象：

   

        点击切换文字颜色
        
测试文字
    
    

第三种：在:style=""中写数组，这种方法综合前面了两种，可以两种形式都写在数组中，我们来给这个元素多加点样式：

 

        点击切换文字颜色
        
测试文字
    
        

最终效果：点击就能使文字变色

 

 class绑定样式

通过改变类名来实现页面变换效果，:class=""中，引号内也是有三种写法

第一种：直接写表达式，为data中的属性

代码：

  
    

        点击改变模块
        
测试文字
    
        

效果：

初始状态：                                                                     

点击后：

 

第二种写成对象，与style中写的对象有一点区别。在这种class属性绑定中对象的属性值为布尔值，当为true时，该属性值的属性为类名成立，反之不成立。

代码展示：

    

        
测试文字
    
        

效果：

 这种方式对象的属性值会在data数据中去匹配，如果我们不需要改变当前类名时我们可以在行内直接将其写成true或者false，也是同样成立的。如：

测试文字

这时box3类名就不存在div

第三种方式：class=""中写数组，数组内每一项可以写不同的形式，是前面的综合，这种形式我们平时都不会用，用的最多的就是写表达式。

代码展示：

 
    

        点击改变模块
        
测试文字
        
        
arr
    
        

效果：