Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Vue instruction v-for how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this Vue instruction v-for article, let's take a look.

The use of Vue v-for 1. Iterative ordinary array

Define a normal array in data

Data: {list: [1,2,3,4,5,6]}

Use the v-for command to render in html

-- Index value-- {{I}}-- each item-- {{item}}

two。 Iterative object array

Define an array of objects in data

Data: {list: [1,2,3,4,5,6], listObj: [{id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'},]}

Use the v-for command to render in html

-- id-- {{user.id}}-name-- {{user.name}}

3. Iterative object

Define objects in data

Data: {user: {id:1, name:' Tony. Jia', gender:' male'}}

Use the v-for command to render in html

-- key is-- {{key}}-- value is-- {{val}}

4. Iteration number this is the {{count}} cycle.

Complete code:

-- Index value-- {{I}}-- each item-- {{item}}

-- id-- {{user.id}}-name-- {{user.name}}

-- key is-- {{key}}-- value is-- {{val}}

This is the {{count}} th cycle.

Var vm = new Vue ({el:'#app', data: {list: [1id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6) Name:'zs6'},], user: {id:1, name:' Tony. Jia', gender:' male'}})

Screenshot:

The best skills of using v-for

In vuejs, the use of v-for is common, allowing you to write for loops in template code. So when using v-for, have you ever thought about some techniques for using this instruction?

Before I introduce its skills, let me introduce its basic usage. In vue, v-for can traverse arrays, objects, and strings, but the most frequently used is traversing arrays. The basic methods are as follows:

{{item.name}}

Some beginners may not consider too many skills in the process of using, and directly traverse the data defined in data. In fact, the original intention of vue design also takes this problem into account. If you use the data in data frequently, it may cause some performance consumption, which is quite unfriendly.

In this article, I'll show you six ways to make your v-for code more accurate, predictable, and powerful.

1. Always use key in a v-for loop

It is recommended that when traversing the data, add key as much as possible and set a unique key property that ensures that the component works the way you want it to work. Sometimes, it is possible to use index index, but in some specific scenarios, such as multi-scene login, if you do not use key to identify the login method currently used, it may cause data disorder. If the amount of data is relatively large, updating the data of the page will cause great performance of rendering data and even unpredictable bug, if we have a unique key reference for each element. Then we can better predict how DOM will operate and avoid a lot of unnecessary problems.

{{item.name}} 2. Do not use v-if in loops

A super common mistake is to use v-if to filter data from v-for loops. Vuejs gives priority to v-for over v-if, which means that the component loops through each element and then checks the v-if condition to determine whether it should be rendered. So, in fact, whatever the condition is, the array will be traversed. Although this may seem intuitive, it can cause a huge performance problem.

/ * Don't write like this, remember * / {item.name}} 3. Use computational properties or methods to process the data before traversing the data

To avoid the above problems, we should filter the data in the template before traversing it. There are two very similar ways

Use calculation properties

Use the filtering method

First, we only need to set a calculation property, and in order to get the same functionality as the previous v-if, the code should look like this.

{{item.name}} export default {data () {return {list: []}}, computed: {underPrice: function () {return this.list.filter (item= > item.price)

< 50) } } } 计算属性是作为属性使用的，并不是方法。使用computed，可以将数据做缓存处理，在每次渲染数据的时候，会优先在缓存在找该数据，如果有了直接从缓存中取出渲染，如果没有的话再重新获取。这样也大大的提高了性能。 或者可以使用方式来进行变量的筛选以及处理再做遍历 {{ item.name }} export default { data () { return { list: [] } }, methods: { underPriceHandle: function (price) { return this.list.filter(item=>

Item.price < price)}}. Cycle within a range

Although in most cases v-for is used to iterate through arrays or objects, in some cases we must only want to loop a certain number of times.

For example, suppose we are creating a paging system for an online store, and we only want to display 10 products per page. Using a variable to track the current page number, we can handle paging like this.

{{books [page * 10 + index]} 5. Access the index of the project in a loop

In addition to traversing the array and accessing each element, we can also track the index of each item.

To do this, we must add an index value after the project, which is very simple and can be used for paging, displaying list indexes, displaying rankings, and so on.

{{index}}-{{item.name}} 6. Traverse an object

We can also use v-for to easily traverse the key-value pairs of an object.

Similar to the index of the access element, we must add another value to the loop. If we iterate through an object with one parameter, we will iterate through all the items.

If we add another parameter, we get items and key, and if we add a third, we can also access the index of the v-for loop.

{{item}} this is the end of the article on "how to use Vue instruction v-for". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use v-for under Vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.