vue.js声明式渲染和条件与循环基础知识


Posted in Javascript onJuly 31, 2017

vue.js声明式渲染和条件与循环的具体内容,分享给大家

绑定 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的代码量

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
基于form-data请求格式详解
Oct 29 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 #Javascript
knockoutjs模板实现树形结构列表
Jul 31 #Javascript
本地存储localStorage用法详解
Jul 31 #Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 #Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 #Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 #Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
轮播的简单实现方法
2016/07/28 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
python 调用c语言函数的方法
2017/09/29 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
利用python绘制正态分布曲线
2021/01/04 Python
股权转让协议书范本
2014/04/12 职场文书
525心理活动总结
2014/07/04 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
高质量“欢迎词”
2019/04/03 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL