摘要：
当我们有一组数据需要进行渲染时，就可以通过v-for来完成1、遍历数组{{index+1}}.{{item}}constapp=newVue2、v-for遍历对象{{item}}{{item}}
当我们有一组数据需要进行渲染时，就可以通过v-for来完成
1、遍历数组
<!--在遍历的过程中，没有用到索引值--> <ul> <li v-for="item in names">{{item}}</li> </ul> <!--在遍历的过程中，获取下标值--> <ul> <li v-for="(item,index) in names">{{index+1}} . {{item}} </li> </ul> const app = newVue({ el: "#app", //用于挂载要管理的元素 data: { //定义数据 message: 'hello', names: ['tom','jerry','marry'] } })
2、v-for遍历对象
<div id="app">
<!--1、在遍历对象的过程中，如果只是获取一个值，那么获取到的就是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--2、获取key和value-->
<ul>
<li v-for="(value,key) in info">{{key}}: {{value}}
</li>
</ul>
<!--3、获取 value,key,index-->
<ul>
<li v-for="(value,key,index) in info">{{index}} -{{key}}: {{value}}
</li>
</ul>
</div>
const app = newVue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
info: {
name: '后臣',
age: 23,
height: 180}
}
})3、v-for使用过程中添加key
<ul> <!--保证key中的内容和要展示的内容是一一对应的 key的作用是为了高效的更新虚拟DOM --> <li v-for="item in letters" :key="item">{{item}} </li> </ul>