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简化JavaScript开发分析
Feb 19 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
Koa代理Http请求的示例代码
Oct 10 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
js瀑布流布局的实现
Jun 28 Javascript
js实现简单抽奖功能
Nov 24 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
angular分页指令操作
2017/01/09 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
中专生自荐信
2014/06/25 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
教师考核评语大全
2014/12/31 职场文书
签约仪式致辞
2015/07/30 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书