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 相关文章推荐
js实现图片拖动改变顺序附图
May 13 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
实例讲解JavaScript截取字符串
Nov 30 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
解析php中const与define的应用区别
2013/06/18 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python之Character string(实例讲解)
2017/09/25 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python如何使用代码运行助手
2020/07/03 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python中字符串的编码与解码详析
2020/12/03 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
会计专业自我鉴定范文
2013/12/29 职场文书
廉洁自律个人总结
2015/02/14 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL