vue系列教程第五篇，即綁定設置屬性的多種方式，具體內容如下
一、設置屬性的值: {{data中的數據}}
window.onload = function () { var c = new Vue({ el : '#box', data : { url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg' } }); }<div id="box"> <img src="{{url}}" alt=""/></div>二、v-bind綁定屬性的值
window.onload = function () { var c = new Vue({ el : '#box', data : { url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg' } }); } <div id="box"> <img v-bind:src="url" alt=""/></div>三、簡寫方式，冒號 (:) 綁定
window.onload = function () { var c = new Vue({ el : '#box', data : { url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg' } }); }<div id="box"> <img :src="url" alt=""/> </div>
四、綁定多個屬性
window.onload = function () { var c = new Vue({ el : '#box', data : { url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg', w : '400px', t : '這是一張百度圖片' } }); }<div id="box"> <img :src="url" :width="w" :title="t" alt=""/></div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
