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" ...
随机推荐
- (转)netcore原生websocket客户端写法(ClientWebSocket)
代码: using System; using System.Net.WebSockets; using System.Text; using System.Threading; using Syst ...
- Pytorch实现对卷积的可插拔reparameterization
需要实现对卷积层的重参数化reparameterization 但是代码里卷积前weight并没有hook,很难在原本的卷积类上用pure oo的方式实现 目前的解决方案是继承原本的卷积,挂载一个we ...
- [DB] 数据库概述
基本概念 关系模型:包括关系数据结构.关系操作集合.关系完整性约束三部分 关系型数据库:建立在关系模型基础上的数据库.由多张能互相联接的二维行列表格组成. 非关系型数据库(Nosql(Not Only ...
- [Web] 计算机网络课程(一)
局域网 覆盖范围小,自己花钱买设备,自己单位维护 线长不超过100米,带宽固定(10M 100M 1000M) 星形结构,上层交换机口少,但每个口带宽高 广域网 距离远 如在家通过ADSL拨号上网,或 ...
- SSL数字证书颁发
一.数字证书 1.数字证书实际上是存在于计算机上的一个记录,是由CA签发的一个声明,证明证书主体("证书申请者"拥有了证书后即成为"证书主体")与证书中所包含的 ...
- 【转-备忘】scatter函数
1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如下: 4.基本的使用方法如下: #导入必要的模块 import numpy as np import matp ...
- 关于Python闭包的一切
任何把函数当做一等对象的语言,它的设计者都要面对一个问题:作为一等对象的函数在某个作用域中定义,但是可能会在其他作用域中调用,如何处理自由变量? 自由变量(free variable),未在局部作用域 ...
- 通过CSS设计模式搭建自己系统的CSS架构
theme: qklhk-chocolate 传统的CSS书写风格是随意命名,堆叠样式,造成了混乱不堪的结果,复杂页面的样式书写通常会出现几百行甚至上千行的代码,CSS设计模式在实际应用中的横空出世拯 ...
- Nginx的超时timeout配置详解
Nginx的超时timeout配置详解 本文介绍 Nginx 的 超时(timeout)配置. Nginx 处理的每个请求均有相应的超时设置.如果做好这些超时时间的限定,判定超时后资源被释放,用来处理 ...
- Docker学习(14) Docker容器的数据管理
Docker容器的数据管理 Docker容器的数据卷 重要: Docker的数据卷容器 Docker数据卷的备份和还原