vue绑定设置属性的多种方式(5)
2017-08-16 08:37
585 查看
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
- vue中绑定属性时添加表达式的书写方式!!
- C#线程中使用委托方式设置控件属性
- Activity设置全屏显示的两种方式及系统自带theme属性解析
- vue.js基础知识篇(3):计算属性、表单控件绑定
- jquery 设置属性 滑动 绑定事件 中断 横列表 手效果 中文正则
- Vue条件循环判断+计算属性+绑定样式v-bind的实例
- vue使用v-for渲染列表属性需要:="items.attribute"绑定
- 我的文档 属性设置里找不到位置选项,以及文件夹迁移解决方式
- vue中动态绑定表单元素的属性方法
- WPF属性绑定测试(索引器方式)
- Vue.js 属性绑定 v-bind
- SSH代理设置(Windows和Linux多种方式)
- jsf通过标签方式设置组件title属性
- 全面讲解在BIOS设置IDE设备的多种组合方式
- XtraGrid ControlGrid绑定及部分属性设置
- Vuejs——(3)计算属性,样式和类绑定
- 通过多种方式获取作用域并设置的值是否存储在值栈
- DataGridView 控件中轻松设置DataGridViewComboBoxColumn数据绑定属性。
- Activity设置全屏显示的两种方式及系统自带theme属性解析