v-for遍历

2022-05-10
作者我爱小小蝶
~3.94K 字

1. 一、遍历对象
2. 二、遍历数组元素
3. 三、:key=”item.id”
4. 四、在template上使用
5. 五、v-for 与 v-if 一同使用
6. 六、在组件上使用 v-for

vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。

它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

一、遍历对象

<div id="app">
    <p v-for="(value,key,index) in user">
        {{index}}：{{key}}：{{value}}</p>
    <hr>
    <p v-for="value in user">{{value}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            user:{
                userId:1,
                userName:'张三',
                userSex:'男'
            }
        }
    });
</script>

value 是遍历得到的属性值
key 是遍历得到的属性名，
index 是遍历当前项的索引

[ key : value ] 键值对形式

这里的 key、index 都是可选参数，如果不需要，这个指令其实可以写成 v-for=”value in user”；

测试结果：

0：userId：1

1：userName：张三

2：userSex：男

张三

男

二、遍历数组元素

value 是遍历得到的元素，index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成 v-for=”value in userArr”；

<div id="app">
       <p v-for="(item, index) in userArr">
           {{item.userId}}, {{item.userName}}, {{item.userSex}}
           <button @click="operate(index)">操作</button>
       </p>

   </div>
   <script>
       let vm = new Vue({
           el: '#app',
           data: {
               userArr: [{
                   userId: 1,
                   userName: '张三',
                   userSex: '男'
               }, {
                   userId: 2,
                   userName: '李四',
                   userSex: '女'
               }, {
                   userId: 3,
                   userName: '王五',
                   userSex: '男'
               }]
           },
           methods: {
               operate(index) {
                   console.log(this.userArr[index]);
               }
           }
       });
   </script>

测试结果：

1, 张三, 男操作

2, 李四, 女操作

3, 王五, 男操作

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

1	<div v-for="item of items"></div>

三、:key=”item.id”

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

1
2
3

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

建议尽可能在使用 v-for 时提供 key 属性，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

注意：不要使用对象或数组之类的非基本类型值作为 v-for 的 key键。请用字符串或数值类型的值。

四、在template上使用

可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

五、v-for 与 v-if 一同使用

不推荐在同一元素上使用 v-if 和 v-for。

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

1
2
3

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的代码将只渲染未完成的 todo。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 template标签上。如：

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

六、在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for。

1	<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop

记录