v-bind指令的学习

原创于 2021-07-28 23:55:24 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

Vue的学习使用-个人笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue.js中使用v-bind进行动态绑定属性的方法，包括对<img>标签的src属性和<a>标签的href属性的绑定。通过v-bind缩写为':'的方式简化代码，实现数据与视图的同步。示例代码展示了如何在Vue实例中定义数据，并在模板中使用这些数据来动态更新标签属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先总结：v-bind用于对标签的属性进行动态绑定(即绑定的是一个变量,而不是常量)
实际工作中 ’v-bind: ’ 都会被简写为 ‘：’
前提: 此标签中有属性可以进行动态绑定，如标签的src属性，标签的href属性

代码展示:

    <div id="app">
        <!-- 给<img>标签的src属性动态绑定 -->
        <img v-bind:src="imgurl"></img>
        <!-- 给<a>标签的超链接href属性动态绑定 -->
        <a v-bind:href="url">百度</a>
        <!--v-bind语法糖可以简写为 :  -->
        <img :src="imgurl"></img>
        <a :href="url">百度</a>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const a = new Vue({
            el: "#app",
            data: {
                imgurl:"http://s1.hdslb.com/bfs/static/jinkela/search/assets/sprite-690be8a6ea.png",
                url: 'http://www.baidu.com'
            }
        })
    </script>