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


Posted in Javascript onAugust 16, 2017

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 #Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 #Javascript
基于js 本地存储(详解)
Aug 16 #Javascript
基于Vue实例生命周期(全面解析)
Aug 16 #Javascript
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP 文件上传限制问题
2019/09/01 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
django form和field具体方法和属性说明
2020/07/09 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
使用索引有什么好处
2016/07/27 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
标准单位租车协议书
2014/09/23 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
起诉书格式范文
2015/05/20 职场文书