vue 中的 v-for

前言

  对于vue中的 v-for，我们都不陌生，甚至说是我们的老朋友了。在需求开发中都是会经常用到的。之前因为需求的原因，用到了我个人之前不常用用到的关于 v-for 中的用法，这里简单的做个总结，记录一下。

使用

• 遍历数组

  <template>
    <div>
      <ul>
        <li v-for="item in forarr" :key="item">{{ item }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        forarr:[1,2,3,4,5,6,7,8,9]
      }
    }
  }
  </script>
  

• 遍历数组对象

  <template>
    <div>
      <ul>
        <li v-for="(item,index) in forarr" :key="index">{{ item.name }} -- {{ index }}</li>
      </ul>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          forarr: [
            {
              name: '张三'
            },
            {
              name: '李四'
            },
            {
              name: '王五'
            }
          ]
        }
      }
    }
  </script>
  

• 遍历对象

  <template>
    <div>
      <ul>
        <li v-for="(item,key,index) in forarr" :key="index">{{ key }} -- {{ item }} -- {{ index }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        forarr: {
          name: '张三',
          age: 18,
          interest: ['篮球', '王者', '联盟', '跑步', '健身']
        }
      }
    }
  }
  </script>
  
    /**
    * 结果：
    *  name -- 张三 -- 0
    *  age -- 18 -- 1
    *  interest -- [ "篮球", "王者", "联盟", "跑步", "健身" ] -- 2
    */