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'  ,同樣可以解決上面的問題