循环

这个又是一个编程语言， 和模版语法里面必不可少的一个， 也是使用业务场景使用最多的一个环节。所以学会使用循环也是重中之重了。 在编程语言中大多使用 for 关键字进行实现， 并且会有 foreach 的语法结构， 这里 Vue.js 使用指令 v-for 进行实现循环处理， 并且语法为： 单项值 in 循环集合（数组）。

本文知识点脑图

v-for 基础使用方式

实际的业务需求， 想要展示一组会员信息，并把会员信息展示到页面上。这里只关注使用方式， 不进行页面的美化， 使用 v-for 实现代码如下：

查看效果

可以看到已经把用户中的数据展示到页面中。 在 v-for 中不进可以遍历数组， 还可以进行对象的遍历。 我们看一下如何遍历对象。

在 v-for 遍历一个对象的时候， 总共有三种使用方式：

u in user

最基本的用法， 直接遍历对象属性的值。

(u, name) in user

在基本的用法之后， 增加了获得对象属性名字的第二个参数配置， 加上该参数，可以读取到对象的属性名。

(u, name, index) in user

在获取属性名基础上， 又增加了 index 获取一个下标的方式。 需要注意的是， 在遍历对象中， 无法切换参数的名字， 否则只会按照对象的顺序进行匹配。 当前的效果为：

针对上面的对象属性名实现的方式， 是使用了 JavaScript 的 Object.keys(); 方法。举个例子：

打开浏览器的控制台查看效果：

因为使用该方式获得对象的属性名， 而各个浏览器的实现标准也不一致， 所以这里也不能保证各个浏览器中的显示效果是一致的。

v-for 中的属性 key

当 Vue 在进行渲染列表中的元素时， 它默认的情况是“就地更新”的策略，如果数据项中的顺序发生了变化， 它并不会根据顺序进行调整对应的 DOM 元素， 而是更新所有的元素数据。并保证他们的索引位置是正确的。 这种情况一般下是高效的。

这里为了能够找个每个节点的的身份或者标记， 从而重用和重新排序现有的元素， 这个时候， 你需要给 v-for 一个 key 属性。 并且建议尽可能的在使用 v-for 的时候， 都能给定一个 key 属性， 并且要保证2个条件， 一是： 不要使用重复的值在一个循环的 key 中， 就是要保证一个循环内（父元素中的子元素）的 key 值唯一， 因为 key 值的重复， 会导致数据渲染错误。 二是： 不要使用数组或者对象， 请用字符串或者数值类型的值。

使用方式： <tr v-for="user in userList" :key="user.userId"> 上面的例子中加入 key 值。

当然 key 还有另外的用法， 到时候说到过渡（动画）的时候， 再来说说它的用法。

数组更新检测机制

变更方法

在 Vue 中监听了数组变更方法， 并且针对这些方法将触发视图的更新。 这些会变更视图的方法有：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

演示代码如下：

打开浏览器点击各个按钮查看效果。

每个按钮的点击都会触发页面的刷新。

非变更方法 替换数组

变更方法， 就是调用了这些方法， 方法会调用原始的数组进行操作。有变更就有非变更， 非变更方法有：

filter(), concat() 和 slice()。他们不会变更原始数组， 总是返回一个新的数组， 所以， 这个时候， 就无法触发原始的变更方法， 也就无法更新页面视图的更新。 这个时候， 我们可以使用新数组替换旧数组， 进行重新赋值的方式进行变更。在这里 Vue 进行了一写额外的操作， 让重新赋值的过程更加高效。例子：

this.userList = this.userList.concat(this.userList);

在 v-for 中使用范围值

有时候， 我们需要循环的显示多次内容， 并且没有对应的数组集合， 这个时候， 我们就可以使用范围值的概念， 可以直接指定一个对应的正整数值， 然后就可以循环对应的次数。

打开浏览器查看效果。

在 <template> 中使用 v-for

当然除了在正常的元素标签中使用之外， template 标签一样也可以使用 v-for 指令， 来渲染多个元素的内容。

有时候不想在元素上加上一层多余的层级， 可以使用模版占位符 template, 在渲染的过程中 Template 不会显示到页面上。 举例说明：

按下 F5 开启调试。查看效果。

可以看到 tr 下面不会增加新的层来渲染数据。 我们在说 v-if 条件控制的时候说过 v-for 和 v-if 最好不要同一元素上进行使用， 主要是因为， v-if 的作用域级别比 v-for 的高， 所以无法访问 v-for 的子元素变量。这个时候真的需要的情况下就可以使用 template 模版占位语法实现了。 举个例子：

<template v-for="user in userList" :key="user.userId">
  <li v-if="!user.role">
    {{ user.userName }}
  </li>
</template>

v-for 过滤/排序

这里可以使用两种方式实现过滤和排序， 一种是使用 computed 计算属性， 另外一种就是使用函数处理。

先看使用计算属性进行处理过滤， 显示大于 5 的数据。

打开浏览器进行调试：

使用方法也可以实现， 方式如下:

查看效果， 和上面效果一致：

一般情况下计算属性可以解决就使用计算属性， 实现比较复杂的情况下可以考虑使用 method 进行实现。排序和过滤基本上都是使用了相同的内容， 过滤是筛选数据， 排序就是在原来的基础上， 进行数据的重新排列。代码如下：

调试查看效果， 这里使用的是倒序的方式进行排序。

v-for 使用简单的说到这里， 还有就是如何在组件中使用 v-for ， 这个等到组件讲解之后， 再来详细的说说使用方式。 而且组件也是当前 MVVC 的框架的重中之重， 必学技能。 关注我。 会有更多后续的内容。