作者 ：混元霹雳手-Ziksang
在基础1发布之后，我真心发现，根据api进一步分析，再结合工作中的实际demo给大家讲解之后，大清早就收获了平均一分种一个喜欢，这使我很欣慰，自己的努力没有白费，我决心称热打铁马上出击，打造基础2，在基础上的部分我将给大家讲解列表渲染 v-for指令，在我自己认为这个是基础篇的核心，为什么我要放在第二部分讲呢，因为我有很多demo例子都会基于v-for指令去讲，这也是我们工作的核心，从后台拿数据，再渲染数据，如果有对基础1因为v-for指令看的不是很透彻的话，请看完这篇再回头看看基础1，还是那句话，支持我创作的请给一个大大的喜欢
赞
v-for 列表渲染
- v-for array 数组渲染
我们用v-for指令根据一组数组的选项列表进行渲染。 v-for指令需要以item in items形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
应用场景：
通常情况下，进入一个活动要展示出所有参加活动的人员，里面有姓名，年龄，报名时间等等，就先举这三个列子，那后台肯定会返回一个arraylist数组集合，集合中每个元素肯定是一个对象，那我们如何去把这个数组集合高效率，合理的渲染到页面上，,再拿到用户id去到下一个页面查询memberDetail祥情，用过jq的同学肯定知识很烦繁，一般肯定是用arttemplate这种模板引擎
-
{
{item.custName}}
{
{item.age}}
{
{item.joinTime}}
复制代码我觉得这个demo太常用了，逐行分析
1.如果在template模板里面用到了数据必须先在data选项里先声明赋值，我们先给memberList给予一个[]数组
2.在created函数里我们就当作模拟从后台拿到的数据，然后赋值给data选项里的memberList，此时memberList就有后台拿到的值了
3.(item,index) in memberList是vue自己封装的一个语法结构
一.item代表集合中的每一个元素，此时每一个元素就是一个对象
二.index代表集合每一个元素的下标
三.memberList是所要循环的数组
4.为什么我们要把 (item,index) in memberList放在每一个循环dom上，那就是li标签 只有在li循环体节点上和循环体所有子节点上拿到item这个对象里面的所有属性
5.@click="memberDetail(index)" 这里用了一个点击方法，我们把index作为了方法的参数，目的是什么，这个index代表每一个循环出来dom的下标，通过点击，我们可以拿到对应的用户id可以说拿到每一个用户的任意值，然后在methods我们进行操作，我们可以能过sessonStorage来存放，用来过度到下一个用户祥情页，来获取所有用户详情，我们可以打开谷歌浏览器，当我们用鼠标点击的时候，可以发现sessionStorage里的变化
整个流程是无论是开发任意中型项目必备的
2.template v-for
如同 v-if 模板，你也可以用带有 v-for 的 标签来渲染多个元素块，循环块区域
应用场景 ：
当我们循环渲染时，我们如果有多个欠套不合理的关系下，一般情况下肯定是在最外层套一个div元素，这个我认为显的不是很清楚，我们用template来代替渲染，不但能省去很dom节点，而且也能解决欠套不合理的情况
{
{item.content}}
![]()
复制代码如果我们不想多创节点，又不想让p元素做为根节点，我们就可以用template来做渲染，在chorme开发者工具上，也能证实，最外层的的template会自动消失，不会创造出多余的节点。
3. v-for Object 对象渲染
你也可以用 v-for 通过一个对象的属性来迭代。
应用场景 ：
就像第一个列子如果到了详情页，我们要展示一个用户详情，如果后端都给你排好序了，如何正确的方便展示出来，用最快，最便捷的方法那就是v-for 迭代对象，一般情况下展示一个用户详情，后台肯定返回一个用户对象给你
{
{key}}
{
{value}}
复制代码1.(value,key) in memberDetailvalue代表属性值key 代表属性,index代表每个dom节点的下标索引
两者都是一一对应的，通过第一个例子讲解，我相信这个例子很简单了
4. v-for 整数迭代
这个看看demo就可以了，我几乎没用过
<span v-for="n in 10">{
{ n }}span>
</div>复制代码
4. v-for 和 组件
在自定义组件里，你可以像任何普通元素一样用 v-for 。
应用场景 ：
比方拿掘金来说，每个用户展现的文章列表中，每个用户的文章可以做成一个统一组件，通过父组件来进行数据的传递，循环出所有人的文章，就形成了文章列表，而且可以在热门，最新，或者专栏里面复用，只需要通过数据传递，是一种相当好的模式
在components文件夹里创一个myArticle文件
{
{artList.name}}
{
{artList.startTime}}
{
{artList.content}}
{
{artList.good}}
复制代码
用props选项来接收父组件传入的数据，渲染组件
App.vue文件
<div>
<my-article v-for='item in artList' :art-list='item'>my-article>
div>
template>
复制代码
那我们最终目的还是要通过方法来改变视图更新，怎么办，很简单，只要把形成的返回值再从新赋值给data选项里的数组就可以了，看api文档说起来很高深的样子，但根本原理就是Array.prototye原型上方法导的鬼，我相信大家肯定很清楚了，上面我还在代码中对...解构新特性给大家演示了一个例子
4. 注意示项
官方提示：
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
在
复制代码
这里因为操作问题我就在代码中直接写了注释，更加能让大家清楚的了解，如何通过那些方法改变数组的长度，改变下标的某一个元素
5. 显示过滤/排序效果
对于我的理解我就定义他叫副本过滤，在不改动data选项原数组的同时，对新数组进行改变，同时也不创造出多余的数据值，那我们这里就要用到一个基础3所要讲的计算属性
应用场景 ：
我在这里做了一个小demo当原数组里面随机改变值的同时，副本基于原数组的创建出一个副本数组跟着过滤的不同而改变
有两个视图：
1.第一个视图，我们点击按纽改变1-10的随机数
2.第二个视图，随着随机数的改变来判断是否为偶数是偶数的则过滤出来
复制代码
随着我们点击按钮的同时，两个视图同时更新，本质上就是在data选项里过滤出一个新数组，同时这个新数组不会影响到data选项里的数组，这个就叫做副本过滤，通过自己的想像可以做出很多不同的demo例子
讲到这个里所有v-for 列表渲染已经讲的我个人认为非常透彻了，如果你动手去把这些代码贴进vue-cli中理解一下，再动手自己敲两个demo，我想你的项目开发速度绝对能提升一倍，最后别望了点赞哦，还是那句话我的更新速度，取决于你们对我的认可，谢谢
掘金史上最详细VUE2.0全套demo讲解（基础篇3） ==> 计算属性
渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学， 微信 zzx1994428 QQ494755899
支持我继续创作和感到有收获的话，请向我打赏点吧
如果转载请标注出自@混元霹雳手ziksang