绑定 class 与 style

PPG007 ... 2021-12-25 About 1 min

# 绑定 class 与 style

# 绑定 class 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>

    <style>
        .basic{
            height: 100px;
            width: 500px;
            border: 2px;
            border-color: black;
            border-style: solid;
        }
        .a{
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        }
        .b{
            background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        }
        .c{
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
        }
        .font1{
            font-size: 30px;
            background-color: skyblue;
        }
        .font2{
            font-size: 50px;
            text-shadow: 10px 10px 10px;
            background-color: skyblue;
        }
        .font3{
            font-size: 50px;
            background-color: skyblue;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div @click="changeStyle" :class="color" class="basic">
            {{name}}
        </div>
        <hr>
        <div :class="classes" class="basic">
            {{name}}
        </div>

        <hr>
        <div :class="classesObj" class="basic">
            {{name}}
        </div>
    </div>

    <script>
        const vm=new Vue({
            el:'#root',
            data() {
                return {
                    name:"PPG",
                    color:"",
                    classes:['font1','font2','font3'],
                    classesObj:{
                        // 默认都是false
                        font1:false,
                        font2:true,
                        font3:true
                    }
                }
            },
            methods: {
                changeStyle(){
                    const arr=['a','b','c'];
                    this.color=arr[Math.floor(Math.random()*3)]
                }
            },
        })
    </script>
</body>
</html>

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

三种写法总结：

字符串写法：适用于样式的类名不确定，需要动态指定。
数组写法：适用于要绑定的样式个数不确定，名字也不确定。
对象写法：适用于要绑定的样式个数确定，名字也确定，但要动态决定用不用。

# 绑定 style 样式

<div class="basic" v-bind:style='styleObj'>
    {{name}}
</div>
<div class="basic" v-bind:style='[styleObj,styleObj2]'>
    {{name}}
</div>

<script>
    const vm=new Vue({
        el:'#root',
        data() {
            return {
                name:"PPG",
                styleObj:{
                    //必须使用驼峰命名
                    backgroundImage: 'linear-gradient(120deg, #f093fb 0%, #f5576c 100%)'
                },
                styleObj2:{
                    //必须使用驼峰命名
                    fontSize:'100px'
                }
            }
        },
    })
</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

与绑定 class 样式类似，即可以使用字符串写法，也可以使用数组写法，但是要注意：

写在 Vue 中的属性名必须采用驼峰命名。
属性值要使用引号。

监视属性条件渲染