Vue内置指令——v-bind

v-bind指令用于动态地绑定一个或多个属性。
在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（<img>）的src属性，我们可能从后端请求了一个包含图片地址的数据，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。v-bind指令主要用于属性绑定。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />6
    <title>动态绑定属性</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 完整语法 -->
        <img v-bind:src="imageSrc" />
        <!-- 缩写 -->
        <img :src="imageSrc" />
    </div>
    <script>
        //2.创建一个Vue的实例
        var app = new Vue({
            el: '#app',
            data: {
                imageSrc: './img/1.jpg'
            }
        })
    </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

运行结果：
在这里插入图片描述
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。class和style都是属性，所以可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind绑定class

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
        .textColor {color: white; background:#CCC;}
        .textSize { font-size: 30px;font-weight: bold;}
        .box{border:1px dashed #000; margin: 20px auto;}
    </style>

</head>

<body>
    <div id="app">
        <!-- 如果绑定的是一个对象,则键为对应的类名,值为对应data中的数据 -->
        <p v-bind:class="{ textColor: isColor }">对象语法</p>
        <!-- 
            1.可以在对象中传入更多属性来动态切换多个 class。
            2.v-bind:class 指令也可以与普通的 class 属性共存。 
        -->
        <div class="box" v-bind:class="{ textColor: isColor, textSize: isSize }">对象语法</div>

        <!-- v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据 -->
        <div class="box" v-bind:class="[textColor, textSize]">数组语法</div>
        <!-- 如果想根据条件切换列表中的class，可以用三目运算 -->
        <div class="box" v-bind:class="[isColor==true?textColor:textSize]">数组语法</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isColor: true,
                isSize: false,//不渲染，注意看下面的截图
                textColor:'textColor',
                textSize:'textSize'
            }
        });
    </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

在这里插入图片描述

绑定对象和绑定数组的区别
绑定对象的时候，对象的属性即要渲染的类名，对象的属性值对应的是data中的数据。
绑定数组的时候数组里面存的是data 中的数据。

v-bind绑定style

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>绑定style</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-bind:style的对象语法十分直观————看着非常像 CSS，
            但其实是一个 JavaScript 对象。 CSS 属性名可以用
            驼峰式 (camelCase)或短横线分隔 (kebab-case，记得用引号括起来) 来命名 -->
        <p v-bind:style="{ color: fontColor, fontSize: fontSize }">对象语法</p>
        <!-- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上 -->
        <p v-bind:style="[fontColorObj, fontSizeObj]">数组语法</p>
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                fontColor: 'red',
                fontSize: '12px',
                fontColorObj:{
                    color:'white',
                    background:'blueviolet'
                },
                fontSizeObj:{
                    'font-size':'30px',
                    'font-weight':'bold'
                }

            }
        })
    </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

相关阅读:
Windos操作系统下的Zookeeper安装图文教程
 ansible copy模块--持续创作中
 Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）
单纯形法学习
 Map和Set
Gem5 Debug
悟了！阿里p9专家强推的《java虚拟机并发编程》后悔没早看到！
瑞芯微 RK1126 平台编译zlib gpac 使用GPAC将H264 H265保存为MP4文件录像
 odoo 给列表视图添加按钮实现数据文件导入
 MySQL索引介绍
原文地址：https://blog.csdn.net/weixin_41092938/article/details/125514514