源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue绑定设置属性的多种方式(5)

  • 时间:2022-08-27 19:55 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue绑定设置属性的多种方式(5)
vue系列教程第五篇,即绑定设置属性的多种方式,具体内容如下 [b]一、设置属性的值: {{data中的数据}}[/b]
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>
[b]二、v-bind绑定属性的值[/b]
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>
[b]三、简写方式,冒号 (:) 绑定[/b]
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>
[b]四、绑定多个属性[/b]
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部