循环

在模板中可以用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没有包装的方法,比如filterconcatslice,如果使用这些方法修改了数组,那么只能把修改后的结果重新赋值给原来的数组才能生效。比如:

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的更多相关文章

  1. 一起学Vue之列表渲染

    在Vue开发中,列表数据绑定非常简单易用,本文主要通过一些简单的小例子,讲述v-for的使用方法,仅供学习分享使用,如有不足之处,还请指正. 用 v-for 把一个数组对应为一组元素 我们可以用 v- ...

  2. vue基础——列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据 ...

  3. 【03】Vue 之列表渲染及条件渲染

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  4. vue基础---列表渲染

    首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...

  5. 前端框架之Vue(6)-列表渲染

    用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...

  6. vue之列表渲染

    一.v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染. 1.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元 ...

  7. vue笔记-列表渲染

    用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...

  8. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  9. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  10. 第六十三篇:Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

随机推荐

  1. (转)netcore原生websocket客户端写法(ClientWebSocket)

    代码: using System; using System.Net.WebSockets; using System.Text; using System.Threading; using Syst ...

  2. Pytorch实现对卷积的可插拔reparameterization

    需要实现对卷积层的重参数化reparameterization 但是代码里卷积前weight并没有hook,很难在原本的卷积类上用pure oo的方式实现 目前的解决方案是继承原本的卷积,挂载一个we ...

  3. [DB] 数据库概述

    基本概念 关系模型:包括关系数据结构.关系操作集合.关系完整性约束三部分 关系型数据库:建立在关系模型基础上的数据库.由多张能互相联接的二维行列表格组成. 非关系型数据库(Nosql(Not Only ...

  4. [Web] 计算机网络课程(一)

    局域网 覆盖范围小,自己花钱买设备,自己单位维护 线长不超过100米,带宽固定(10M 100M 1000M) 星形结构,上层交换机口少,但每个口带宽高 广域网 距离远 如在家通过ADSL拨号上网,或 ...

  5. SSL数字证书颁发

    一.数字证书 1.数字证书实际上是存在于计算机上的一个记录,是由CA签发的一个声明,证明证书主体("证书申请者"拥有了证书后即成为"证书主体")与证书中所包含的 ...

  6. 【转-备忘】scatter函数

    1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如下: 4.基本的使用方法如下: #导入必要的模块 import numpy as np import matp ...

  7. 关于Python闭包的一切

    任何把函数当做一等对象的语言,它的设计者都要面对一个问题:作为一等对象的函数在某个作用域中定义,但是可能会在其他作用域中调用,如何处理自由变量? 自由变量(free variable),未在局部作用域 ...

  8. 通过CSS设计模式搭建自己系统的CSS架构

    theme: qklhk-chocolate 传统的CSS书写风格是随意命名,堆叠样式,造成了混乱不堪的结果,复杂页面的样式书写通常会出现几百行甚至上千行的代码,CSS设计模式在实际应用中的横空出世拯 ...

  9. Nginx的超时timeout配置详解

    Nginx的超时timeout配置详解 本文介绍 Nginx 的 超时(timeout)配置. Nginx 处理的每个请求均有相应的超时设置.如果做好这些超时时间的限定,判定超时后资源被释放,用来处理 ...

  10. Docker学习(14) Docker容器的数据管理

    Docker容器的数据管理 Docker容器的数据卷 重要: Docker的数据卷容器 Docker数据卷的备份和还原