vue.js基础-声明式渲染和条件与循环
来源:互联网 发布:罗志祥有淘宝店吗 编辑:程序博客网 时间:2024/05/29 17:18
绑定 DOM 元素文本值
html代码:
<div id="app"> {{ message }}</div>
JavaScript代码:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})
运行结果:Hello Vue!
总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素会相应地更新。
绑定 DOM 元素属性
用v-bind指令绑定span元素的title属性
html代码:
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停此处几秒, 可以看到此处动态绑定的 title! </span></div>
JavaScript代码:
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() }})
运行结果:
总结:v-bind 属性被称为指令,是由 Vue 提供的专用属性,该指令的作用就是:“将此元素的 title 属性与 Vue 实例的 message 属性保持关联更新”。当我们改变app2.message的值时,绑定了title属性的元素会进行更新。
条件
用v-if指令判断条件
html代码:
<div id="app-3"> <p v-if="seen">现在你可以看到我</p></div>
JavaScript代码:
var app3 = new Vue({ el: '#app-3', data: { seen: true }})
运行结果:你可以看到我
总结:当我们把app3.seen的值改为false以后,我们会看到 span 消失。说明我们不只是可以将数据绑定到文本和属性,也可以将数据绑定到 DOM 结构。从而通过数据的更改实现元素的插入/更新/删除操作。
循环
v-for 指令,可以使用数组中的数据来展示一个项目列表
html代码:
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div>
JavaScript代码:
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '创建激动人心的代码' } ] }})
运行结果:1.学习 JavaScript
2.学习 Vue
3.创建激动人心的代码
在控制台,输入 app4.todos.push({ text: ‘新的 item’ }),你会看到列表中追加了一个新的 item。
总结::可以通过数据确定我们项目列表的长度和内容,从而减少了html的代码量
阅读全文
0 0
- vue.js基础-声明式渲染和条件与循环
- vue.js基础-声明式渲染和条件与循环
- vue.js条件渲染
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js 学习6 条件渲染与列表渲染
- vue声明式渲染
- Vue基础(条件渲染)
- Vue.js笔记-条件渲染 列表渲染
- Vue基础之Vue条件渲染
- vue.js 嵌套循环渲染
- 【Vue】 -(6) 条件渲染和列表渲染
- Vue.js学习系列(六)---条件与循环
- 前端框架vue.js系列(2):条件与循环
- Vue.js教程5-条件渲染
- Vue基础:条件渲染、列表渲染、事件处理
- Vue.js 学习(6) -- Vue指令之:条件渲染
- Vue.js学习笔记:v-if条件渲染与v-show区别
- vue笔记1----声明式渲染
- struts2 ---ajax请求(Json,jquery)
- PWM技术
- python、java、C三种方法打印乘法表
- 本地存储localStorage的用法总结
- 对象的行为(构造函数、方法)
- vue.js基础-声明式渲染和条件与循环
- 【python】函数:函数文档、关键字参数、默认参数、收集参数
- 在Windows下搭建ftp服务
- Windows文件转到linux后,出现中文乱码问题
- Django中paramiko使用密钥执行命令和上传文件
- CBoard框架使用总结五--扩展菜单配置功能
- mysql好书推荐
- iOS展示超大图片或超高分辨率图片崩溃解决方法
- 使用SecureCRT连接Linux时,alt + .等功能键不能使用的解决办法