How to better use VUE v-for loop

Get into the habit of writing together! This is the 8th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

1 Introduction

It is not unfamiliar to familiar vuedevelopers v-for, because it must be used in the development process. We often use it to traverse arrays or objects and display lists. Today, we will list several common usages and suggestions, so that we can use it better.

2. Instructions for use

2.1 v-forSet :keykey value for each

• Using values ​​in loops is :keyalso the officially recommended method.

• In the absence of settings :key, when we dynamically change the array, there may be out-of-order situations. In the following code, if you remove it :key="student.id", select a student, and then click to add a student, there will be a disorder.

• :keyEach element will have a unique key reference, and it will be more convenient for us to manipulate data.

<template>
  <ul>
    <li v-for="student in students" :key="student.id"><input type="checkbox">{{ student.id }}：{{ student.name }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>

<script setup>
import {reactive} from "vue";

const students = reactive([
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 3, name: '王五'},
])
const addStudent = () => {
  const _id = students.length + 1
  students.unshift({id: _id, name: '学生' + _id})
}
</script>
复制代码

2.2 Using indexindexes in loops

In addition to giving the loop definition :key, we can also access the index in the loop, the index will be an ordinal number starting from 0.

<template>
  <ul>
    <li v-for="(student, index) in students" :key="student.id"><input type="checkbox">#{{index}}.{{ student.id }}：{{ student.name }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>
复制代码

2.3 Using filtermethods to filter elements

Sometimes we need to filter and display the data, or according to the above example, make some changes and add the student score field.

We need to filter the passing scores of students, then we can do it through loop filtering filter. In fact, v-ifjudging the score can also achieve the effect, but it is not recommended to deal with it, because the data is also rendered in a loop, and the performance cannot be maximized.

<template>
  <ul>
    及格分数：<input type="number" v-model="minScore">
    <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}.名称：{{ student.name }}；分数：{{ student.score }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>

<script setup>
import {reactive, ref} from "vue";

const minScore = ref(60)
const students = reactive([
  {id: 1, name: '张三', score: 59},
  {id: 2, name: '李四', score: 80},
  {id: 3, name: '王五', score: 90},
])
const filterItems = (items) => {
  return items.filter((item) => {
    return item.score >= minScore.value
  })
}
const addStudent = () => {
  const _id = students.length + 1
  const _score = Math.round(Math.random() * 100 + 30)
  students.unshift({id: _id, name: '学生' + _id, score: _score})
}
</script>

复制代码

2.4 Do not v-foruse inv-if

Please don't try v-forto use it in v-if, if you need to filter the data, use the filtermethod. If you really need to judge whether to display the content of the module, it is recommended to make a judgment v-ifon the upper layer .v-if

For example, if the above example is changed, it is necessary to judge that the content information will only be displayed when it is a teacher. isTeacherAdded to ulmedium, not limedium.

<template>
  <ul v-if="isTeacher">
    及格分数：<input type="number" v-model="minScore">
    <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}.名称：{{ student.name }}；分数：{{ student.score }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>
复制代码

Summarize

In this article, the use cases briefly introduced v-formay have been used or understood by everyone, but I hope it can bring you a little gain and make coding more enjoyable for you.