Vue Class与Style绑定

1 Class绑定

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

1.1 字符串写法

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

<div class="xxx1" v-bind:class="xxx2">div>

<div class="xxx1" :class="xxx2">div>
1
2
3
4

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

new Vue({
    ...
    data: {
        xxx2: "normal"
    }
})
1
2
3
4
5
6

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

.basic {
    color: red;
}
.bigFont {
    font-size: 30px;
}
.colorFont {
    background-color: pink;
}
1
2
3
4
5
6
7
8
9

具体代码如下：

<div id="app">
    <div class="basic" :class="addClass" @click="changeClass">橘猫吃不胖div>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            addClass: "bigFont"
        },
        methods: {
            changeClass() {
                if (this.addClass === "bigFont") {
                    this.addClass = "colorFont";
                } else {
                    this.addClass = "bigFont";
                }
            }
        },
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

1.2 数组写法

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

<div class="xxx1" v-bind:class="classArr">div>

<div class="xxx1" :class="classArr">div>
1
2
3
4

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

new Vue({
    ...
    data: {
        classArr: ["class1", "class2", "class3", ...]
    }
})
1
2
3
4
5
6

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

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

.basic {
    color: red;
}
.bigFont {
    font-size: 30px;
}
.colorFont {
    background-color: pink;
}
1
2
3
4
5
6
7
8
9

具体代码如下：

<div id="app">
    <div :class="classArr">橘猫吃不胖div>
    <button @click="changeColor">更改颜色button>
    <button @click="changeFontSize">更改大小button>
    <button @click="changeBack">更改背景button>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            classArr: ["basic", "bigFont", "colorFont"]
        },
        methods: {
            changeColor() { // 更改颜色
                let index = this.classArr.indexOf("basic");
                if (index === -1) {
                    this.classArr.push("basic");
                } else {
                    this.classArr.splice(index, 1);
                }
            },
            changeFontSize() { // 更改字体大小
                let index = this.classArr.indexOf("bigFont");
                if (index === -1) {
                    this.classArr.push("bigFont");
                } else {
                    this.classArr.splice(index, 1);
                }
            },
            changeBack() { // 更改字体背景
                let index = this.classArr.indexOf("colorFont");
                if (index === -1) {
                    this.classArr.push("colorFont");
                } else {
                    this.classArr.splice(index, 1);
                }
            }
        },
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

1.3 对象写法

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

<div class="xxx1" v-bind:class="classObj">div>

<div class="xxx1" :class="classObj">div>
1
2
3
4

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

new Vue({
    ...
    data: {
        classObj: {
            class1: true / false,
            class2: true / false,
            ...
        }
    }
})
1
2
3
4
5
6
7
8
9
10

其中，class1、class2…是类名。

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

<div id="app">
    <div :class="classObj">橘猫吃不胖div>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            classObj: {
                basic: false, // 不显示
                bigFont: true, // 显示
                colorFont: true // 显示
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2 Style绑定

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

2.1 对象写法

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

<div v-bind:style="{ 属性1: 属性值1, 属性2: 属性值2 + 'px' }">div>

<div :style="{ 属性1: 属性值1, 属性2: 属性值2 + 'px' }">div>
1
2
3
4

示例代码：

<div id="app">
    <div :style="{ color: 'orange', fontSize: fontSize + 'px'}">橘猫吃不胖div>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            fontSize: 30,
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11

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

<div v-bind:style="styleObj">div>
<script>
    new Vue({
        ...
        data: {
            styleObj: {
                属性1: 属性值1,
                属性2, 属性值2,
                ...
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

<div id="app">
    <div v-bind:style="styleObj">橘猫吃不胖div>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            styleObj: {
                color: "orange",
                fontSize: "30px"
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 数组写法

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

<div v-bind:style="styleArr">div>

<div :style="styleArr">div>
1
2
3
4

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

new Vue({
    ...
    data: {
        styleArr: [
            {
                属性1: 属性值1,
                属性2: 属性值2,
                ...
            }, {
                属性3: 属性值3,
                ...
            }
            ...
        ]
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

示例代码：

<div id="app">
    <div v-bind:style="styleArr">橘猫吃不胖div>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            styleArr: [
                {
                    fontSize: "30px",
                    color: "red"
                }, {
                    backgroundColor: "pink"
                }
            ]
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

或者可以写成以下形式：

<div v-bind:style="[styleArr1, styleArr2...]">div>

<div :style="[styleArr1, styleArr2...]">div>
1
2
3
4

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

new Vue({
    ...,
    data: {
        styleArr1: {
            属性1: 属性值1,
            属性2: 属性值2,
            ...
        },
        styleArr2: {
            属性3: 属性值3,
            ...
        },
        ...
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

<div id="app">
    <div v-bind:style="[arr1, arr2]">橘猫吃不胖div>
div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            arr1: {
                fontSize: "30px",
                color: "red"
            },
            arr2: {
                backgroundColor: "pink"
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17