vue循环遍历 v-for

当我们有一组数据需要进行渲染时，就可以通过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 = new Vue({
  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 = new Vue({
  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>