Vue绑定数据和元素属性，v-bind

2023-11-05 15:19•服务端开发•阅读 1981

v-bind就是用于绑定数据和元素属性的

v-bind后面是：属性名=，v-bind也要有一个简写的方式就是：（冒号），可以理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

如果你的 Vue 实例有一个 data property [key]，其值为 "href"，那么这个绑定将等价于 v-bind:href。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-bind 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style>
        .red {
            color: red;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
    <body>
        <div >
            <a v-bind:href="url">{{text}}</a>
            <img v-bind:src="img">
            <!-- v-bind也要有一个简写的方式  就是：冒号 -->
            <p :class="bool?'red':''">我是红色</p>
        </div>

    </body>

</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            url: "http://www.baidu.com",
            text: "百度一下",
            img: "https://cn.vuejs.org/images/logo.png",
            bool: true
        },
    })
</script>

打开浏览器的 JavaScript 控制台，输入 app.img="https://www.baidu.com/img/baidu_jgylogo3.gif"，就会再一次看到这个绑定了img 的 HTML 已经进行了更新。

动态设置html属性值。

上一篇 »vue自定义指令属性注解
下一篇 »Vue v-bind v-model的使用