我们继续来学习vue3中的基础知识。我们这节课来学习vue中的列表循环：v-for指令。前面的课程其实我们已经使用过v-for指令了。这节课，我们就来详细学习一下vue-for指令。

v-for循环渲染数组

我们新建一个demo12.html页面，然后复制一下hello world基础代码，删除掉message变量，我们重新来声明一个数组，在数组里面，我们默认放上几条数据。比如我们放一个吴某，罗某，还有王某。

data(){
    return{  
        listArray:['吴某','罗某','王某']
    }
},

数组声明好了，我们现在就可以来循环渲染这个数组，在template中我们来渲染一个列表，比如我们使用ul无序列表，里面添加一个li来列出每一个列表项。在li上我们就可以使用v-for指令来循环渲染出每一个列表项。 它使用in这中语法来循环便利我们的数据，in前面可以来接受数组中的每一项，可以自定义取一个变量名，我们比较常用item，因为item比较语意化一点更加符合我们代码规范要求。然后我们就可以把item使用插值表达式来插入到我们li中。

template:`
    <ul>
        <li v-for="item in listArray">{{item}}</li>
    </ul>
`

完成了这些，我们就打开浏览器来预览效果，可以看到，我们如愿以偿的渲染出来一个列表。

结果：

再回到代码，我们都知道数组它是用下标索引的，那我们怎么通过v-for语句来获取索引呢。

同样在in前面，我们可以来声明一个变量名接受索引，要接受多个值的话，我们需要用()来包裹一下，类似于声明参数一样，第一个参数接受数组下标值，第二个参数就用来索引。在li里面我也通过插值表达式来渲染一下索引，给它放到item前面吧。

然后我们来看一下效果。这样数组的每一个下标我们就渲染出来了。

template:`
    <ul>
        <li v-for="(item,index) in listArray">{{index}}、{{item}}</li>
    </ul>
`

结果：

我们来分析一下代码，v-for 通过in这种语法方式来把，数组每一项都循环或者叫遍历出来，并且把下标值赋值了 item，把下标索引赋值给了index。那么这v-for来渲染数组， 下面我们再来看一下如v-for怎么来循环对象。

v-for循环渲染对象

v-for指令循环不仅可以循环数组，也可以循环对象。比如我们来声明一个对象。

叫它profileObj 。

data() {
      return {
       listArray:["吴某","罗某","王某"],
       profileObj:{
          name:"吴某",
          age:18,
          work:"老师",
          sex:"男"
       }

      }
    }

然后我们来另起一个列表，直接复制一下。把listArray 替换成profileObj，渲染对象和渲染数组它稍微有那么一点点不同，它 in 前面可以接收三个值，我们稍微来改一下。因为对象它键直对的结构嘛，所以在循环对象的时候，第一个参数接收是就是对象每一项的值（value），第二个参数接收的是每一项的键名（key），第三个参数才是索引。

我们同样来也渲染出来看看。

template: `
      <ul>
        <li v-for="(value,key,index) in profileObj">{{index}}、{{key}}:{{value}}</li>  
      </ul>
    `

结果：

好那么这节课就到，我们可能还得再开两节课来继续学习v-for