Vue内置指令——v-bind

最新推荐文章于 2024-08-09 15:57:23 发布

沐小侠

最新推荐文章于 2024-08-09 15:57:23 发布

阅读量1.2k

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41092938/article/details/125514514

版权

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

本文介绍了Vue.js中的v-bind指令，用于动态绑定属性，包括图片的src属性、class和style。通过v-bind，我们可以根据数据动态设置元素的class列表和内联样式。示例代码展示了如何使用对象和数组语法绑定class及style，以及它们之间的区别。

摘要由CSDN通过智能技术生成

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>

运行结果：
在这里插入图片描述
操作元素的 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>

在这里插入图片描述

绑定对象和绑定数组的区别
绑定对象的时候，对象的属性即要渲染的类名，对象的属性值对应的是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>