v-for

v-for指令作用：

循环遍历普通数组、对象数组、对象、数字等。

 

<template>
  <span>
    <!-- 遍历普通数组 -->
    <div v-for="(item,i) in arrList">{{i}} {{item}}</div>
    <!-- 遍历对象数组 -->
    <div v-for="(item,i) in arrListObj">{{item.id}} {{item.name}} {{i}}</div>
    <!-- 遍历对象 -->
    <div v-for="(val,key,i) in obj">{{val}} {{key}} {{i}}</div>
    <!-- 遍历数字-->
    <div v-for="(item,i) in 3">{{item}} {{i}} </div>
  </span>
</template>

<script>
  export default {
    data() {
      return {
        arrList: ['php', 'asp', 'java'],
        arrListObj: [{
          id: 1,
          name: 'php'
        }, {
          id: 2,
          name: 'asp'
        }, {
          id: 3,
          name: 'java'
        }],
        obj: {
          id: 1,
          name: 'vue.js',
          desc: ' 理念:数据驱动视图和组件化'
        }
      }
    }
  }
</script>