Vue.js 了解 v-bind 指令

作者: Rinaloving | 来源:发表于2019-08-01 17:56 被阅读0次

Vue.js从0到1：v-bind指令
Vue.js 了解 v-bind 指令
Vue——自定义指令
10-Vue的常用指令
Vuejs复习笔记
Vue.js中常用的指令缩写
Vue基础指令
vue中的指令
vue 中修改属性
【Vue】常用指令之v-bind

v-bind 主要是动态更新HTML元素上的属性，回顾一下下面的示例：

链接的href属性和图片的src属性都被动态设置了，当数据变化时，就会重新渲染。在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式styled的动态绑定，他们也是HTML的属性，因此可使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>了解 v-bind 指令</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接</a>
        <img style="height: 400px;width: 300px;" v-bind:src="imgUrl">
        <br>
        <br>
        <!--缩写为-->
        <a :href="url">链接</a>
        <img style="height: 400px;width: 300px;" :src="imgUrl">

    </div>

    <!--自动识别最新稳定版本的Vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                url:'https://www.baidu.com',
                imgUrl:'http://b127.photo.store.qq.com/psb?/440982b8-1f1e-473c-b41d-b630005d5f65/k47uYaiYTmzFY29wd.*P67qQrqqT3MhfQ7PypQE3b4g!/b/dDb0wUsuBAAA&bo=gALEA1IDAAUBKB4!&rf=viewer_4'
            }
        })
    </script>

</body>
</html>

了解v-bind指令.png