Make writing a habit together! This is the 8th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

1. Introduction

V-for will be familiar to developers familiar with VUE, as it must be used during development. We often use it to iterate over groups of numbers or objects to display lists. Today we will list some common uses and suggestions to help us use them better.

2. Instructions on usage

2.1 for eachv-forSet up the:keyThe key value

  • Use the :key value in the loop, which is also officially recommended.

  • Without :key, when we change the array dynamically, it is possible to get out of order. In the following code, if you remove :key=”student.id”, select a student and click Add Student, the order will be out of order.

  • The :key allows each element to have a unique key reference, making it easier 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> </template> </ script setup> import {reactive} from "vue"; Const students = reactive({id: 1, id: 1}, {id: 2, id: 1}, {id: 2, id: 2}, {id: 1, id: 1}, {id: 1, id: 2}, {id: 1, id: 2}, {id: 1, id: 2}, {id: 1, id: 2}, },]) const addStudent = () => {const _id = student.length + 1 student.unshift ({id: _id, name:) const addStudent = () => {const _id = student.length + 1 student.unshift ({id: _id, name: 'student' + _id})} </script>Copy the code

2.2 Use in circulationindexThe index

In addition to defining the key for the loop, we can also access the index in the loop, which will be the serial number counting from 0.

<template> <ul> <li v-for="(student, <input type="checkbox">#{{index}}.{{student. Id}} : </li> <button @click="addStudent"> </button> </ul> </template>Copy the code

2.3 the use offilterMethod to filter elements

Sometimes we need to filter the data and filter the display, or according to the above example, modify it and add the student score field.

We need to filter the passing score of students, so we can operate by circulating filter. In fact, v-if scores can also achieve the effect, but it is not recommended to do so, because the data is also rendered in a loop, which cannot achieve the maximum performance.

<template> <ul> <input type="number" v-model="minScore"> <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}. Name: {{student.name}}; Score: {{student.score}}</li> < button@click ="addStudent"> </button> </template> </ script setup> import {reactive, ref} from "vue"; Const minScore = ref (60) const students = reactive ([{id: 1, name: 'zhang' score: 59}, {id: 2, name: 'bill' score: 80}, {id: 3, id: 0, score: 0 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) Unshift ({id: _id, name: 'student' + _id, score: _score})} </script>Copy the code

2.4 don’tv-forThe use ofv-if

Do not use v-if in v-for. If you need to filter data, use the filter method. If you really need to check whether v-if displays module content, it is recommended to do v-IF judgment in the upper layer.

For example, in the example above, you need to determine that only the teacher displays the content information. IsTeacher was added to UL, not LI.

<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 }}. Name: {{student.name}}; </button @click="addStudent"> </button> </ul> </template>Copy the code

conclusion

In this article, a simple introduction of v-for use cases, may be useful to everyone or already understand, but I hope to bring you a little harvest, let their own more pleasant coding.