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设置按钮的disabled属性的实现代码
Nov 28 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
小程序表单认证布局及验证详解
Jun 19 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
关于php mvc开发模式的感想
2011/06/28 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JS高级笔记
2011/07/13 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python如何实现异步调用函数执行
2019/07/08 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
Python ORM编程基础示例
2020/02/02 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
三年级语文教学反思
2014/02/01 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
党支部公开承诺书
2014/03/28 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript