vuejs 2—bind

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定 a元素的href属性，比如动态绑定 img元素的 src属性。

这个时候，我们可以使用v-bind指令∶

  • 作用：动态绑定属性
  • 缩写：:
  • 预期：any (with argument) | Object (without argument)
  • 参数：attrOrProp (optional)
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Title</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>
            <!--<h2>{{}}</h2>-->

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

        </div>

        <script src="../js/vue.js "></script>
        <script>
            setTimeout(function() {
                const app = new Vue({
                    el: '#app',
                    data: {
                        message: '你好啊',
                        imgURL: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599998657341&di=95b1c83d837a8adb05f48208df3ce146&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F51c41ae1ec1b5.jpg',
                        aHref: 'http://www.baidu.com'
                    }
                })
            }, 1000)
        </script>
    </body>

</html>

 

posted @ 2020-09-01 18:51  我等着你  阅读(125)  评论(0)  编辑  收藏  举报