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" ...
随机推荐
- [并发编程 - 多线程:信号量、死锁与递归锁、时间Event、定时器Timer、线程队列、GIL锁]
[并发编程 - 多线程:信号量.死锁与递归锁.时间Event.定时器Timer.线程队列.GIL锁] 信号量 信号量Semaphore:管理一个内置的计数器 每当调用acquire()时内置计数器-1 ...
- .Net·快速查找哪一个类库引用了哪一个Package
阅文时长 | 0.18分钟 字数统计 | 348.8字符 主要内容 | 1.引言&背景 2.查找法示例 3.声明与参考资料 『.Net·快速查找哪一个类库引用了哪一个Package』 编写人 ...
- [bug] VMvare 虚拟机磁盘空间耗尽
问题 VMvare虚拟机文件默认创建在C盘,装大程序的时,空间用尽就会报错,此时补救的办法是把虚拟机文件复制到空间足够的盘,再重新打开 最好一开始就选再有足够空间的盘里创建虚拟机 参考 https:/ ...
- 008.Ansible文件管理模块
一 stat模块 检查文件状态使用,模块获取文件的状态等信息,类似与linux中的STAT命令可以用来获取文件的属主.可读/写.文件状态等信息 [root@node1 ansible]# stat ...
- Linux 忘记密码解决方法——RedHat
[RedHat7.4版本] 1.将忘记密码的rhel7.4版本的虚拟机打开 2.等3秒左右出现这个画面时,用方向键,将光标移动到第二栏处,接着按"e"键 3.接在在linux16这 ...
- docker总结复习
一.概念 1.容器( container-based )虚拟化方案,充分利用了操作系统本身已有的机制和特性,以实现轻量级的虚拟化(每个虚拟机安装的不是完整的虚拟机),甚至有人把他称为新一代的虚拟化技术 ...
- IT菜鸟之交换机基础配置
交换机属于二层设备(隶属于osi七层模型中的第二层:数据链路层,不识别不支持IP地址) > 用户模式 用于登录设备 # 特权模式 用于查询设备配置 (config)# 全局模式 用于配置设备 ...
- Redis 哨兵模式配置
搭建步骤 第一步: 在 redis.conf 配置文件目录下拷贝三份 sentinel.conf 文件 [root@node-01 redis-5.0.9]# cp sentinel.conf sen ...
- 【Java】Files.readAllBytes(Path) 遇见的坑
Files.readAllBytes(Path)方法把整个文件读入内存,此方法返回一个字节数组,还可以把结果传递给String的构造器,以便创建字符串输出. 在针对大文件的读取的时候,可能会出现内存不 ...
- 4.3 Python3进阶-函数嵌套和嵌套调用
>>返回主目录 源码 # 函数嵌套 def func1(): print("这是外部函数") def func2(): print("这是内部函数1" ...