vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解
一、总结
一句话总结:
v-for
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
1、vue.js中的循环结构(列表渲染:for)如何使用?
v-for
用于循环的数组里面的值可以是对象,也可以是普通元素
v-for
可以使用 v-for
指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为 item in items
,items
是数据数组,item
是当前数组元素的别名:
示例:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
{% raw %}
- {{item.message}}
{% endraw %}
详细示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var dataList = {
innerText: [ '大家好', '欢迎来到麦子学院!' ]
};
new Vue({
el: 'div',
data: dataList
});
};
</script>
</head>
<body>
<div class="head face">
22 <span v-for="text in innerText">{{ text }}</span>
</div>
</body>
</html>
2、vue.js中的循环结构(列表渲染:for)对普通的for循环的增强有哪些?
$index
在 v-for
块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index
,正如你猜到的,它是当前数组元素的索引:
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
{% raw%}
- {{ parentMessage }} - {{ $index }} - {{ item.message }}
{% endraw %}
另外,你可以为索引指定一个别名(如果 v-for
用于一个对象,则可以为对象的键指定一个别名):
<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>
3、vue.js中想用循环结构,但是不想给循环出来的东西添加标签,如何操作?
template v-for
类似于 template v-if
,也可以将 v-for
用在 <template>
标签上,以渲染一个包含多个元素的块。例如:
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
4、vue.js的循环中,如何动态改变数据源数组里面的内容?
数组变动检测 变异方法
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开浏览器的控制台,用这些方法修改上例的 items
数组。例如:example1.items.push({ message: 'Baz' })
。
5、vue.js的列表渲染中,修改数据源数组的方法和不修改数据源数组的方法分别有哪些?
变异方法 替换数组
变异方法
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开浏览器的控制台,用这些方法修改上例的 items
数组。例如:example1.items.push({ message: 'Baz' })
。
替换数组
变异方法,如名字所示,修改了原始数组。相比之下,也有非变异方法,如 filter()
, concat()
和 slice()
,不会修改原始数组而是返回一个新数组。在使用非变异方法时,可以直接用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。
6、vue.js的列表渲染中,遍历对象和遍历数组有什么区别?
$key
也可以使用 v-for
遍历对象。除了 $index
之外,作用域内还可以访问另外一个特殊变量 $key
。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ $key }} : {{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
结果:
{% raw %}
- {{ $key }} : {{ value }}
{% endraw %}
也可以给对象的键提供一个别名:
<div v-for="(key, val) in object">
{{ key }} {{ val }}
</div>
在遍历对象时,是按 `Object.keys()` 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
7、vue.js的列表循环中如何循环打印整数(比如1-100)(比如将某内容重复多少遍)?
值域 v-for
v-for
也可以接收一个整数,此时它将重复模板数次。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
结果:
{% raw %}
{% endraw %}
二、内容在总结中
参考:vue 列表渲染_w3cschool
https://www.w3cschool.cn/aekdgs/mjag7dn1.html
如需更加详细,参考vue的手册即可
vue.js循环for(列表渲染)详解的更多相关文章
- vue.js学习笔记(二)——vue-router详解
vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...
- Vue.js - 路由 vue-router 的使用详解2(参数传递)
一.使用冒号(:)的形式传递参数 1,路由列表的参数设置 (1)路由列表的 path 是可以带参数的,我们在路由配置文件(router/index.js)里以冒号的形式设置参数. (2)下面样例代码中 ...
- Vue.js中学习使用Vuex详解
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- vue.js循环语句
vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- 微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
随机推荐
- mysql回滚日志
一.回滚日志(undo log) 1.作用 保存了事务发生之前的数据的一个版本,可以用于回滚,同时可以提供多版本并发控制下的读(MVCC),也即非锁定读 2.内容 逻辑格式的日志,在执行undo的时候 ...
- Data Center Drama 欧拉回路的应用
这题说的是给了n个点 和m条边, 这m条边是无向的,任务是将这些边变成有向的,并且添加最少的有向边使得这个图中每个点的入度为偶数, 出度为偶数. 我们可以考虑使用欧拉回路来解决这个问题,这样说,假如一 ...
- 2016-2017-2 20155309南皓芯java第五周学习总结
教材内容总结 这一周学习的进度和前几周比较的话是差不多的,都是学习两章. 异常处理 1.理解异常架构 2.牚握try...catch...finally处理异常的方法 3.会用throw,throws ...
- 混合使用ForkJoin+Actor+Future实现一千万个不重复整数的排序(Scala示例)
目标 实现一千万个不重复整数的排序,可以一次性加载到 2G 的内存里. 本文适合于想要了解新语言 Scala 并发异步编程框架 Akka, Future 的筒鞋. 读完本文后,将了解如何综 ...
- 【运维技术】JENKINS管道部署容器化初探
目标服务器安装docker参考官方文档 https://docs.docker.com/install/linux/docker-ce/centos/ (可选)在目标服务器上安装docker私服 ht ...
- MySQL Crash Course #05# Chapter 9. 10. 11. 12 正则.函数. API
索引 正则表达式:MySQL only supports a small subset of what is supported in most regular expression implemen ...
- 重启eclips后启动项目出现监听文件找不到
重启eclips后启动项目出现监听文件找不到 问题: 重启eclips后启动项目出现Error configuring application listener of class com.thinkg ...
- ArcThemALL!5.1:解压、脱壳、压缩样样精通
原文链接:http://www.ithome.com/html/soft/57033.htm ArcThemALL!软件主要功能: 1.支持压缩和解压功能,支持常用的7z.zip.cab.iso.ra ...
- 20145206邹京儒《网络对抗》逆向及Bof基础实践
20145206邹京儒<网络对抗>逆向及Bof基础实践 1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:ma ...
- 汽车OBD接口定义
汽车上的OBD-II接口(母): ELM327用到的引脚: 2: SAE-J1850 PWM和SAE-1850 VPW总线(+) 4. 车身地 5. 信号地 6. CAN high (ISO 157 ...