01-v-bind的基本使用

林笙10

于 2021-05-03 10:37:54 发布

阅读量210

点赞数

分类专栏： # 03-动态绑定属性文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46498227/article/details/116373886

版权

03-动态绑定属性专栏收录该内容

5 篇文章

订阅专栏

01-v-bind的基本使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-bind基本使用</title>
</head>

<body>
    <div id="app">
        <!--错误的做法：这里不可以使用mustache语法-->
        <!--<img src="{{imgURL}}" alt="">-->
        <!--正确的做法：使用v-bind指令-->
        <img v-bind:src="imgURL" alt="">
        <a v-bind:href="aHref">百度一下</a>

        <!--语法糖的写法-->
        <img :src="imgURL" alt="">
        <a :href="aHref">百度一下</a>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgURL: "https://p3.ssl.qhimgs1.com/t01df918e27db115423.jpg",
                aHref: "http://www.baidu.com"
            }
        })
    </script>
</body>

</html>