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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
js选项卡的制作方法
Jan 23 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 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设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php封装的smarty类完整实例
2016/10/19 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
python实现读Excel写入.txt的方法
2018/04/29 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
pytorch中的inference使用实例
2020/02/20 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
长青弘远的面试题
2012/06/09 面试题
Why we need EJB
2016/10/20 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
竞争上岗实施方案
2014/03/21 职场文书
低碳生活倡议书
2014/04/14 职场文书
大型营销活动计划书
2014/04/28 职场文书
任命书范本大全
2014/06/06 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
车间质检员岗位职责
2015/04/08 职场文书
电影建国大业观后感
2015/06/01 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis