欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue綁定設置屬性的多種方式(5)

 更新時間：2017年08月16日 08:37:29   作者：ghostwu  
這篇文章主要為大家詳細介紹了vue綁定設置屬性的多種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue系列教程第五篇，即綁定設置屬性的多種方式，具體內容如下

一、設置屬性的值: {{data中的數(shù)據(jù)}}

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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論