7。 V-bind 绑定

v-bind介绍

之前学习Mustache表达式一般用在标签体中，然而有有些标签的内容是响应式的，就无法用Mustache来解析，例如：

ima 和 a标签：

<script src="js/vue.js"></script>
    <div id="app">
        <a href="{{baidu}}">百度一下</a>
        <img src="{{imgUrl}}">
    </div>
<script>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　此代码是错误代码×××
    const app = new Vue({
        el:"#app",
        data:{
            baidu:"https://www.baidu.com/",
            imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
        }
    })
</script>

所以这个代码是完全错误的在标签属性中是解析不了的若我们想让他可以实现解析【绑定】，也让标签属性实现动态化：

那么就用v-bind指令：

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

即：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<!--  v-bind:  -->
    <a v-bind:href="baidu">百度一下</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            baidu:"https://www.baidu.com/",
            imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
        }
    })
</script>

</body>
</html>

所以就成功了，还有简写 “：” 简称：v-bind语法糖

例如:

<div id="app">
<!--  v-bind: 简写就是 : 冒号即可 -->
    <a :href="baidu">百度一下</a>
    <img :src="imgUrl">
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            baidu:"https://www.baidu.com/",
            imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
        }
    })
</script>

总结：

很方便的一个绑定但是呢注意后面跟的数据不是 {{}} ，而是Vue的data中的键.

这玩意不支持驼峰写法命名，如果要的话，使用的时候记得在驼峰处加上 - 。

本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/14931435.html