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 相关文章推荐
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 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程序员的技术成长规划
2016/03/25 PHP
php封装的验证码类分享
2017/02/26 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
python发布模块的步骤分享
2014/02/21 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
django实现后台显示媒体文件
2020/04/07 Python
详解python metaclass(元类)
2020/08/13 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
品牌服务方案
2014/06/03 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
工作表扬信范文
2015/01/17 职场文书
入党转正介绍人意见
2015/06/03 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
详解OpenCV曝光融合
2022/04/29 Python