vue框架入门--属性绑定

最新推荐文章于 2023-06-20 23:42:49 发布

春意迟迟、

最新推荐文章于 2023-06-20 23:42:49 发布

阅读量365

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_58167492/article/details/126591696

版权

由于插值表达式适用于双标签里面的，对于但标签我们又如何操作它的值？这时候可以用属性表达的方式，为需要取值的属性前添加v-bind:

<body>
    <style>
        img {
            width: 70px;
            height: 70px;
        }
    </style>
    <div class="box">
        <div>昵称：{{name}}</div>
        <img v-bind:src="touxiang" alt="">
        <a v-bind:href="baidu">百度1</a>
        //v-bind同：效果一样，后者是简写形式
        <a :href="baidu">百度2</a>
        <input type="text" :value="value">
    </div>

    <script>
        new Vue({
            el:".box",
            data:{
                name:"rose",
                touxiang:"./picture/荷花.webp",
                baidu:"www.baidu.com",
                value:"输入框中的值"
            }
        })
    </script>
</body>

v-bind：与：是一样的，只是后者是前者的简写形式