vue中的样式绑定

样式绑定

样式绑定有class绑定和style绑定，这里我们分别说说

class绑定

class样式绑定与有两种语法：对象语法（v-bind:class='{active:isActive}'）、数组语法（v-bind:class='[activeClass]'）。

对象绑定

首先我们需要将我们需要的类写出来，再通过v-bind指令进行绑定，对象中的键值对，键名代表要添加的类，值表示是否实现，对象中值的值只有true和false；为false时，这个class将不会被应用。

 

同样的我们也可以通过方法改变数据中的值，从而实现样式的该改变。

数组绑定

 数组绑定同样需要将类写出来，不同于对象用法的是，数组绑定是直接用的数据内的值，它会将所要的类在数据中申明，在应用到元素中，同样的，我们爷可以通过方法改变数据的值达到类切换的效果。

 

 

 对象数组的结合用法

在元素中利用数组用法，然后在数组中添加对象，在某些时候，结合用法会显得更加方便

 

 对象和数组的简写方式

我们直接通过在数据中利用一个变量写上所有想要的数据，再利用绑定事件将其绑定再元素上

 默认class

在碰到有类不是通过vue数据添加的时候，在运行显示页面时，默认类会和数据中添加的类结合到一起。

style绑定

style绑定（v-bind:style='样式'）同class绑定一样，有数组语法和对象语法，不同的是，style绑定的是直接添加样式，即对象绑定就是直接书写样式，数组绑定就相当于是在数据中将类写好，直接添加上去，并且只添加一个数据变量时，不需要数组语法，直接将变量引用就可以了