vue添加img的src地址 v-bind

vue获取数据用{{ a }}

但是放在img标签的src里面不被解析

按照上述用法

html部分

 <div id="test2">
        <img src="{{ url }}" alt="">
    </div>

js部分

 const vm1 = new Vue({
            el: '#test2',
            data: {
                url: "a.jpg",
            }
        })

这样的话  控制台会报错  img的地址不会被解析

 

 正确的用法  通过v-bind进行绑定

 <div id="test2">
        <img v-bind:src="url" alt="">
    </div>

这样在进行输出的时候，就会解析url

 如果标签内有很多属性的话，v-bind就需要写很多，看起来就会显得非常乱

vue还提供了一个简写，就是在属性前面加个 冒号 ，例如 ：src='url'  ,同样可以解决上面的问题