遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染

**
新学习新征程，我们一起踏上学习 vue.js的新长征

… … …

关注我，我们一起学习进步。

当我们需要将一个数组来渲染出去的时候，通常用到的就是我们 v-for 指令.

简单示例：
在这里插入图片描述

我们在使用 v-for 指令的时候，需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

在我们的 v-for 块中，我们可以访问所有父作用域的属性（property）。

简单示例： 你可以发现我们的父元素，会被添加在每一个数组数据的后面
在这里插入图片描述

补充：
我们的 v-for 还支持一个可选的第二个参数，这第二个参数表示当前项的索引。（索引从0开始）

简单示例：
在这里插入图片描述

第二个参数可以用任意的字母来代表，但是由于 index 的中文意思就是索引的意思，所以一般大多数情况，我们都会用 index 来写作第二个参数；由于我们的索引都是从零开始的，假如我们需要计数从1 开始那就在后面渲染的时候，写作 { {index+1}}

当然 v-for 也可以来遍历一个对象的所有 property，也可以将其渲染进我们的 dom

在这里插入图片描述
它还可以添加两个参数：第二个是属性的键名（一般用 key 来表示），第三个参数作为属性的索引（索引从零开始，一般调用 index 来表示）

我们先来看一个例子：先写一个组件做一个按钮，然后进行v-for 渲染下面的数组你可以发现数组的属性有几个，我们的按钮也同样被渲染了和属性相同的个数
在这里插入图片描述
但是这样不能区分我们的四个按钮分别代表的是哪个，所以我们需要添加属性

当然直接写 v-for 这样也是可以的，并且这里的 10 并不来自我们 data 而是来自我们的本身
在这里插入图片描述
同样，假如我们创建了一个样式，需要呈现多个相同的样式渲染进我们页面，也是可以这样写的：

当然和 v-if 类似，我们也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容.

简单示例： 循环渲染一个数组，但是每个数据下还需要跟着循环一根下划线，代码如下：
在这里插入图片描述

在这里插入图片描述
上图是一个数组，然后将其循环渲染进我们的页面的，假如我们不想将所有的数据都渲染进来，我们想要的是显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，我们可以创建一个计算属性，来返回过滤或排序后的数组。

简单示例：可以看出我们经过筛选，只渲染了数组中能整除2 的数据（也就是偶数）
在这里插入图片描述

了解：
Filter：web中的 过滤器，当访问服务器的资源时，过滤器可以将请求拦截下来，完成一些特殊的功能（一般用于完成通过的操作，如：统一编码处理、敏感字符过滤等）

当然上面的这个例子也是可以通过添加 v-if 来完成的：
在这里插入图片描述
当然这里用我们前面学的 method 方法也是可以的。

**
关注校园君有话说公众号，回复 web前端免费领取50G 前端学习资料一份，我们一起学习进步吧。
在这里插入图片描述
**