Vue动态切换Class属性和Style样式的区别

        先说说如何动态切换class属性和style样式，有三种方式，一种是三目的写法,二种是对象的写法，三种是数组的写法！

        第一，先说说三目，先将class属性绑定，改成(:class),然后class的值用一个变量，最后通过Vue的data代码块中写来进行修改变量的true或者false。

        第二，对象写法，优点是可以切换多种class样式的组合，缺点就是没有办法再添加新的属性。同样是将class属性绑定，改成(:class),然后class的值用一个变量，最后通过Vue的data代码块中进行，比如定义的变量是isClass:{

                                a:true,b:true

                      }true不用加分号，这是class的一种格式。这样的意思就是表示当前的isClass这个在绑定的class中有了两个属性值，一个是a，一个是b，就有了两种样式。

        第三，数组写法，优点是可以随时的添加新的class属性，用法前面也是一样，只是在Vue中用的是数组写法，比如当前的变量是isClass:['a','b','c'],这样就表示当前的class属性有三个值的样式，a样式,b样式,c样式，可以用数组的pop()删除最后一个c样式，也可以push('d')添加一个d样式。

 

再说说如何动态改变style样式,首先将style绑定,改成(:style),效果一样还是通过变量再Vue中的data中改变值，三目的话就要拼接在一起，对象的话就在代码块中写上属性名称，比如bacnkground:"red",没有等于号，只有冒号，顺便值还是要加引号。数组的话就要再里面加上花括号{},比如isClass:[{background:'red'},{fontSize:"55px"}]里面需要加花括号和冒号和引号。

      以上就是style样式和class属性的区别所在！