vue(列表循环：v-for)

v-for

作用：基于一个数组来渲染一个列表。
语法形式：item in items (其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。)

使用v-for迭代一个数组

实例：做一个列表渲染：

<template>
  <div class="main">
    <ul>
      <li v-for="item in mystudents">姓名：{{item.name}}年龄：{{item.age}}住址：{{item.address}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mystudents: [
        { name: "lisa", age: 12, address: "shanghai" },
        { name: "coco", age: 13, address: "suzu" },
        { name: "meimei", age: 11, address: "guangzhou" }
      ]
    };
  },
  methods: {}
};
</script>

渲染结果：

v-for 还支持一个可选的第二个参数为当前项的索引。

<template>
  <div class="main">
    <ul>
      <li v-for="(item,index) in mystudents">索引是：{{index}}      姓名：{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mystudents: [
        { name: "lisa"},
        { name: "coco"},
        { name: "meimei"}
      ]
    };
  },
  methods: {}
};
</script>

渲染结果：

注：你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>
 <li v-for="item of mystudents">姓名：{{item.name}}</li>

使用v-for迭代一个对象

迭代一个对象，参数表示对象值

<template>
  <div class="main">
    <ul>
        <li v-for="val in myobj">
            {{val}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myobj:{
          firstname:'john',
          lastname:'doe',
          age:12
      }
    };
  },
  methods: {}
};
</script>

结果显示对象中的值：

当提供第2个参数时，第2个参数表示键名：

<li v-for="(val,key) in myobj">
	{{key}}-{{val}}
</li>

结果如下：

当提供第3个参数时，第3个参数表示索引:

<li v-for="(val,key,index) in myobj">
     {{key}}-{{val}}-{{index}}
</li>

显示结果：

v-for使用key

key的作用：
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

注意：

• 建议尽可能在使用 v-for 时提供 key 属性，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
• 因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
• 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

---

实例

（1）显示过滤后的结果：

<template>
<div>
<ul>
    <li v-for="(n,index) in evenNum" :key="index">{{n}}</li>
</ul>
</div>
</template>
<script>
export default {
    data(){
        return{
            num:[0,1,2,3,4,5,6]
        }
    },
    computed:{
        evenNum:function(){
            return this.num.filter((item) => {return item%2==0});
        }
    }
}
</script>

显示结果：

(2)使用methods方法过滤一个二维数组

<template>
<div>
<ul v-for="(x,index) in arry" :key="index">
    数组中第{{index+1}}个数组符合条件的数字如下：
    <li v-for="(y,i) in evenFun(x)" :key="i">{{y}}</li>
</ul>
</div>
</template>
<script>
export default {
    data(){
        return{
            arry:[[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
        }
    },
    methods:{
        evenFun(n)
        {
            return n.filter((item) => {
                return item%2==0;
            })
        }
    }
}
</script>

显示结果如下：

（3）v-for也可以接受整数。在这种情况下，它会把模板重复对应次数。

<span v-for="n in 10">{{n}}</span>

打印结果：
12345678910