Vue(8)列表渲染v-for
循环
在模板中可以用v-for
指令来循环数组,对象等。
循环数组
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
<div id="app">
<ul>
<li v-for="item in items">{{item.message}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
items: [
{message: 'Hello'},
{message: 'World'},
]
}
})
</script>
结果:
Hello
World
v-for
还支持一个可选的第二个参数,即当前项的索引。
<div id="app">
<ul>
<li v-for="(item, index) in items">{{index+1}}.{{item.message}}</li>
</ul>
</div>
注意:索引index
是放在item
之后
结果:
1.Hello
2.World
你也可以用 of
替代 in
作为分隔符,因为它更接近 JavaScript
迭代器的语法:
<div v-for="item of items"></div>
循环对象
循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数。示例代码如下:
<div id="app">
<div v-for="value in person">
{{value}}
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
person: {
"username": "甲壳虫",
"age": 18,
"homepage": "https://www.cnblogs.com/jiakecong/"
}
}
});
</script>
结果:
甲壳虫
18
https://www.cnblogs.com/jiakecong/
你也可以提供第二个的参数为 property
名称 (也就是键名):
<div v-for="(value, key) in person">
{{key}}:{{value}}
</div>
结果:
username:甲壳虫
age:18
homepage:https://www.baidu.com/
还可以用第三个参数作为索引:
<div v-for="(value, key, index) in person">
{{index}}.{{key}}:{{value}}
</div>
结果:
0.username:甲壳虫
1.age:18
2.homepage:https://www.baidu.com/
保持状态:
循环出来的元素,如果没有使用key
元素来唯一标识,如果后期的数据发生了更改,默认是会重用的,并且元素的顺序不会跟着数据的顺序更改而更改。比如:
<div id="app">
<div v-for="book in books">
<label for="book">{{book}}</label>
<input type="text" :placeholder="book">
</div>
<button @click="changeBooks">更换图书</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
books: ['三国演义','水浒传','红楼梦','西游记']
},
methods: {
changeBooks: function(event){
this.books.sort((x,y) => {
return 5 - parseInt(Math.random()*10)
});
}
}
});
</script>
我们会发现,如果我们在input
标签中输入了值,然后点击更换图书,你会发现即使数据更改了,input
并不会跟着数据的更改而更改
这时候我们只需要在v-for
的时候加上一个key
属性就可以了。示例代码如下:
<div v-for="(book,index) in books" v-bind:key="book">
<label for="book">{{book}}</label>
<input type="text" v-bind:placeholder="book">
</div>
注意,key只能是整形,或者是字符串类型,不能为数组或者对象。
触发视图更新:
Vue
对一些方法进行了包装和变异,以后数组通过这些方法进行数组更新,会出发视图的更新。这些方法如下:
1.push()
:添加元素的方法。
this.books.push("甲壳虫")
2.pop()
:删除数组最后一个元素。
this.books.pop()
3.shift()
:删除数组的第一个元素
this.books.shift()
4.unshift(item)
:在数组的开头位置添加一个元素
this.books.unshift("甲壳虫")
5.splice(start: number, deleteCount: number, ...items: T[])
:向数组中添加或者删除或者替换元素
start
参数代表从第几个下标开始deleteCount
代表删除几个数,可以为0代表不删items
代表增加的对象
// 向books第0个位置添加元素
this.books.splice(0,0,"甲壳虫")
// 下标从0开始,删除2个元素
this.books.splice(0,2)
// 下标从0开始,替换2个元素
this.books.splice(0,2,'甲壳虫','aaaa')
6.sort(function)
:排序
this.books.sort(function(x,y){
// 取两个随机数排序
a = Math.random();
b = Math.random();
return a-b;
});
7.reverse()
:将数组元素进行反转
this.books.reverse();
还有一些Vue
没有包装的方法,比如filter
、concat
、slice
,如果使用这些方法修改了数组,那么只能把修改后的结果重新赋值给原来的数组才能生效。比如:
this.books = this.books.filter(function(x){
return x.length>3?false:true;
})
视图更新注意事项
1.直接修改数组中的某个值是不会出发视图更新的。比如:
this.books[0] = '甲壳虫';
这种情况应该改成用splice
或者是用Vue.set
方法来实现:
Vue.set(this.books,0,'甲壳虫');
2.如果动态的给对象添加属性,也不会触发视图更新。只能通过Vue.set
来添加。比如:
<div id="app">
<ul>
<li v-for="(value,name) in person" @click="changePerson">{{name}}:{{value}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
person: {"username": '甲壳虫'}
},
methods: {
changePerson: function(event){
// 直接修改this.person.age是没有效果的
// this.person.age = 18;
Vue.set(this.person,'age',18)
}
}
});
</script>
Vue(8)列表渲染v-for的更多相关文章
- 一起学Vue之列表渲染
在Vue开发中,列表数据绑定非常简单易用,本文主要通过一些简单的小例子,讲述v-for的使用方法,仅供学习分享使用,如有不足之处,还请指正. 用 v-for 把一个数组对应为一组元素 我们可以用 v- ...
- vue基础——列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据 ...
- 【03】Vue 之列表渲染及条件渲染
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- vue基础---列表渲染
首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...
- 前端框架之Vue(6)-列表渲染
用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...
- vue之列表渲染
一.v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染. 1.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元 ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 第六十三篇:Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
随机推荐
- Camera.main
在Unity项目的C#代码中可以看到Camera.main.transform.position.Camera.main.transform.eulerAngles.Camera.main.trans ...
- Form-OCR & CSDNAPP初体验
项目 内容 课程:北航2020春软件工程 博客园班级博客 作业:阅读并撰写博客回答问题 软件案例分析 我在这个课程的目标是 全面地评价一个软件 这个作业在哪个具体方面帮助我实现目标 明确软件开发过程中 ...
- [源码解析] 并行分布式框架 Celery 之 Lamport 逻辑时钟 & Mingle
[源码解析] 并行分布式框架 Celery 之 Lamport 逻辑时钟 & Mingle 目录 [源码解析] 并行分布式框架 Celery 之 Lamport 逻辑时钟 & Ming ...
- CSS中margin负值巧布局
margin负值实现细边框 我们先准备五个div盒子,并设置好浮动和2px的实线黑色边框,看看效果 中间的边框线挨在了一起致使边框变粗成了4px,这时使用margin负值就可以解决这个问题 <s ...
- 【转载】Linux查看PCIe版本及速率【方法】PCIE的X4X8X16 查看 数量 怎么看
Linux查看PCIe版本及速率 PCIE有四种不同的规格,通过下图来了解下PCIE的其中2种规格 查看主板上的PCI插槽 # dmidecode | grep --color "P ...
- ARM64平台编译stream、netperf出错解决办法 解决办法:指定编译平台为alpha [root@localhost netperf-2.6.0]# ./configure –build=alpha
ARM64平台编译stream.netperf出错解决办法 http://ilinuxkernel.com/?p=1738 stream编译出错信息: [root@localhost stream]# ...
- Debian 9.4 多网卡链路聚合bond配置
Debian 9.4 多网卡链路聚合bond配置 安装ifenslave ifenslave 的作用是网卡的负载均衡 root@debian:~# apt-get install ifenslave ...
- scala :: , +:, :+ , ::: , ++ 的区别
4 种操作符的区别和联系 :: 该方法被称为cons,意为构造,向队列的头部追加数据,创造新的列表.用法为 x::list,其中x为加入到头部的元素,无论x是列表与否,它都只将成为新生成列表的第一个元 ...
- 【Java】Jackson解析xml的坑
为了获取xml数据,在spring mvc中针对 @ResponseBody配置了jackson. 刚用的时候内心是狂喜的,终于不用自己解析了---- but----------还是有坑的-- 坑一 ...
- Python3统计gitlab上的代码量
import threading import gitlab import xlwt #获取所有的user def getAllUsers(): usersli = [] client = gitla ...