给元素绑定属性

229 阅读1分钟

元素绑定属性指令

v-bind:元素属性
其语法糖简写为:元素属性

标准写法: v-bind:src="变量" 
简写形式: :src="变量"

v-bind可以给所有标签中的属性绑定js中的变量,没有v-bind标签属性中的js变量就是一个字符串作为属性值,而加入v-bind后变量不再是一个字符串而是取js变量的值作为属性值。

使用案例

    <div id="content">
        <p v-html="name"></p>
        <img v-bind:src="pic" style="width: 200px;">
        <a :href="obj.blanc" v-html="obj.leader"></a>
    </div>
    <script>
        let vm=new Vue({
            el:"#content",
            data:{
                name:"AOTU",
                pic:"https://wx1.sinaimg.cn/mw1024/007LiS3sly1h5m49k6qnuj30u01hcwgx.jpg",
                obj:{
                    leader:"kaka",
                    blanc:"https://blancgroup.com/"
                }
            }
        });
    </script>

image.png