Vue Class与Style绑定

• 1 Class绑定
• • 1.1 字符串写法
  • 1.2 数组写法
  • 1.3 对象写法
• 2 Style绑定
• • 2.1 对象写法
  • 2.2 数组写法

1 Class绑定

在Vue中，如果要为某个元素动态添加某个类，并不会使用document.getElementById等选择器将该元素获得，而是使用v-bind:class（简写:class）来进行改变。

1.1 字符串写法

字符串写法适用于样式的类名不确定，需要动态指定的情况。用法如下：

xx2需要在data中进行声明，最后，元素上的class就是xxx1 normal

new Vue({...data: {xxx2: "normal"}
})

例如，下面元素有一个基本的类basic，显示字体颜色为红色，还有两个类bigFont和font-size，效果分别是font-size变为30px和background-color为pink，点击该元素，会切换两个类，默认最先开始显示bigFont类
三个类具体如下：

.basic {color: red;
}
.bigFont {font-size: 30px;
}
.colorFont {background-color: pink;
}

具体代码如下：

橘猫吃不胖

从效果图可以看出，元素的class在basic bigFont和basic colorFont来回切换。

1.2 数组写法

数组写法适用于绑定的类个数不确定，类名也不确定的情况。比如class1、class2、class3三个类，元素可能只用1，也可能用1、3，也可能全用，这样的情况就使用数组写法。具体用法如下：

其中，classArr是在data中定义的数组，数组中存放的是要用到的类名，涉及到几个类，就在数组中传几个类。

new Vue({...data: {classArr: ["class1", "class2", "class3", ...]}
})

接下来可以通过操作数组的增删改查来修改数组，达到更改类的效果。

例如，还是3个类basic、bigFont、colorFont，新增3个按钮，点击按钮可以动态添加这三个类，默认效果三个类都存在。
三个类具体如下：

.basic {color: red;
}
.bigFont {font-size: 30px;
}
.colorFont {background-color: pink;
}

具体代码如下：

橘猫吃不胖
更改颜色更改大小更改背景

1.3 对象写法

对象写法适用于绑定的类个数确定，名字也确定，但是要动态的判断是否使用的情况。用法如下：

classObj是在data中定义的对象，具体形式如下：

new Vue({...data: {classObj: {class1: true / false,class2: true / false,...}}
})

其中，class1、class2…是类名。

例如，3个类basic、bigFont、colorFont，显示bigFont、colorFont，不显示basic，具体代码如下：

橘猫吃不胖

2 Style绑定

为某个元素添加样式时，也可以使用v-bind:style（简写:style）来进行样式上的绑定。

2.1 对象写法

可以为v-bind:style直接传一个对象，健是样式属性，值是样式值。

示例代码：

橘猫吃不胖

或者在data中定义v-bind:style中的对象，具体方式如下：

上面的例子可以写成如下形式：

橘猫吃不胖

2.2 数组写法

可以为v-bind:style传入数组，数组中是样式对象，具体如下：

styleArr是样式对象的数组，在data中定义，具体形式如下：

new Vue({...data: {styleArr: [{属性1: 属性值1,属性2: 属性值2,...}, {属性3: 属性值3,...}...]}
})

示例代码：

橘猫吃不胖

或者可以写成以下形式：

styleArr1、styleArr2…是在data中定义的样式对象

new Vue({...,data: {styleArr1: {属性1: 属性值1,属性2: 属性值2,...},styleArr2: {属性3: 属性值3,...},...}
})

上面的例子可以写成如下形式：

橘猫吃不胖