vue-动态绑定

learning › vue

vue的动态绑定分为三种: 绑定属性,绑定class,绑定style

绑定语法

1
v-bind:要绑定的属性

其中v-bind可以简写为冒号:

绑定属性

例如:绑定图片地址,颜色等

1
2
v-bind:src="url"
v-bind:href="linkurl"

使用简写

1
2
:src="url"
:href="linkurl"
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 如果没有使用v-bind动态绑定指令,那么图片不会显示出来 -->
        <img src="imgurl" alt=""></img>
        <!-- 使用v-bind即可正常显示图片 -->
        <img v-bind:src="imgurl" alt=""></img>

        <a href="linkurl">博客地址</a>
        <a v-bind:href="linkurl">博客地址</a>

        <!-- 语法糖写法,即简写形式为一个冒号 -->
        <a :href="linkurl">博客地址</a>
    </div>
    <script src="../../../vue.js" charset="utf-8"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                imgurl: 'https://cn.bing.com/th?id=OHR.HumpbackHerring_ZH-CN2868885675_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp'
                ,linkurl: 'https://ulomo.github.io'
            }
        })
    </script>
</body>
</html>

绑定class

有两种使用方式:

  • 使用对象
  • 使用数组

通常使用对象较多

在使用对象时,使用{key-value}的形式

key为类名,value为一个布尔值,用来控制是否启用这个class

1
:class={class1:bool1, class2:bool2}

bool值作为一个变量是在vue中对其进行赋值的

在使用列表时,使用列表的形式[]

列表中的每一个元素时,列表中是每一个要设置的class,而判断是否启用class,是在vue中判断的

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        .check{
            color: orange
        }
        .checked{
            color: green
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 动态绑定class时,后面为一个对象,使用{key:value}的形式 -->
        <!-- <button @click='reversecolor' :class='{classname1:value1, classname2:value2}' type="button" name="button">确认</button> -->
        <button @click='reversecolor' :class='{check:c1, checked:c2}' type="button" name="button">确认</button>

        <!-- 还可以使用方法来返回内容较长的对象 -->
        <button @click='reversecolor' :class='getclass()' type="button" name="button">确认</button>

        <!-- 数组语法 -->
        <button @click='reversecolor' :class='[value1,value2]' type="button" name="button">确认</button>
    </div>
    <script src="../../../vue.js" charset="utf-8"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                c1: true,
                c2: false,
                value1: 'check',
                value2: 'checked'
            },
            methods: {
                reversecolor(){
                    // 点击事件bool值的改变使用!取反,不需要使用if去判断
                    this.c1 = ! this.c1,
                    this.c2 = ! this.c2
                },
                getclass(){
                    // 使用方法来返回对象
                    return {check: this.c1, checked: this.c2}
                }
            }
        })
    </script>
</body>
</html>

绑定style

和数组一样,也有两种绑定方式:对象和列表

不过在使用对象时,value并不是布尔值,而是style对应的值

1
:style={fontSize:finalsize, backgroundColor:finalcolor}

列表的使用方式一样

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 绑定对象语法 -->
        <!-- 使用v-bind来绑定style -->
        <p :style="{fontSize: '80px' ,backgroundColor: 'orange'}">{{message}}</p>
        <!-- 用变量代替固定的属性值 -->
        <p :style="{fontSize: finalsize + 'px' ,backgroundColor: finalcolor}">{{message}}</p>
        <!-- 使用方法来避免在这里写太多东西 -->
        <p :style="getstyle()">{{message}}</p>

        <!-- 绑定数组语法 -->
        <!-- 将所有属性放在变量中,一般和条件配合使用,决定使用那一种style -->
        <p :style='[base,overridebase]'>{{message}}</p>
    </div>
    <script src="../../../vue.js" charset="utf-8"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello vue!"
                ,finalsize: 100
                ,finalcolor: 'green'
                ,base: {fontSize: this.finalsize + 'px', backgroundColor: this.finalcolor}
                ,overridebase: {fontSize: '20px', backgroundColor: 'brown'}
            },
            methods: {
                getstyle(){
                    return {fontSize: this.finalsize + 'px',backgroundColor: this.finalcolor}
                }
            }
        })
    </script>
</body>
</html>

总结

不论是使用对象还是列表,通常都是将这些数据在vue中用函数写好,在html中直接调用函数就好了