• 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>
    转载请注明出处:https://www.cnblogs.com/stu-jyj3621
  • 相关阅读:
    第一个爬虫和测试
    数学规律
    自定义手绘
    tqqqy的成绩表
    Linux常用命令-netstat
    文档查看命令 cat more less tail head
    Linux三剑客-常用命令
    IO多路复用模型
    redis 的线程模型
    为什么需要缓存?
  • 原文地址:https://www.cnblogs.com/stu-jyj3621/p/13597892.html
Copyright © 2020-2023  润新知