17 v-for circular arrays and objects and methods of object arrays

Haste makes waste, and stability makes for victory.

When using Vue, loop is the most commonly used operation. Although we have briefly explained the use of v-for in the tutorial [introduction], it is not comprehensive. Next, we will use two articles to explain the specific use of v-for in detail.

Method of v-for circular array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
        data(){
            return{ 
            }
        },
        methods:{
        },
        template:``
    }) 
    const vm=app.mount("#app")
</script>
</html>

The most basic Vue file structure, and then declare an array in data. The array is called listArray.

The code is as follows:

data(){
    return{  
        listArray:['primary','intermediate','senior']
    }
},

After writing the arrays in data, what we need to do now is to loop out these arrays in template. Of course, v-for is used here.

The code is as follows:

template:`
    <ul>
        <li v-for="item in listArray">{{item}}</li>
    </ul>
`

After the above code is written, preview the effect in the browser. You can see that the list has been rendered on the page as we wish. When v-for renders an array, you can also add an index, that is, the subscript of the array.

template:`
    <ul>
        <li v-for="(item,index)  in listArray">[{{index}}]{{item}}</li>
    </ul>
`


These are the most basic knowledge of v-for circular arrays.

About the key value in the loop

In order to improve the looping performance, after one of the array items changes, the whole array will not be re rendered. Vue provides a method to use the bound key value to increase the rendering performance and avoid repeated rendering.

To understand this concept, write a button first, and then push a new value to the array each time you click the button.

methods:{
    handleChangeBtnClick(){
        this.listArray.push('willem')
    },
},
template:`
    //......
    <button @click="handleChangeBtnClick">Point me to change</button>
`

After writing, you preview on the page. When you click the button, you see that a new content is added on the surface, and the whole list is actually re rendered.

In practice, such code is not allowed. It will reduce the performance of the page. When the amount of data becomes more, users will become stuck.

At this time, you can add the unique key value. After adding it, vue will recognize which content has not changed after rendering, and only render the newly changed content.

<ul>
    <li v-for="(item,index)  in listArray" :key="index+item">
        [{{index}}]{{item}}
    </li>
</ul>

The official does not recommend using the index as the key value, but in order to maintain uniqueness, index+item is used to bind the key value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
        data(){
            return{
                listArray:['primary','intermediate','senior']
            }
        },
        methods:{
            handleChangeBtnClick(){
                this.listArray.push('willem');
            }
        },
        template:`
            <ul>
                <li v-for="(item,index)  in listArray" :key="index+item">
                    [{{index}}]{{item}}
                </li>
            </ul>
            <button @click="handleChangeBtnClick">Point me to change</button>
        `
    }) 
    const vm=app.mount("#app")
</script>
</html>

Method of v-for loop object

v-for can loop not only arrays, but also objects. The use method is basically the same as that of arrays (but the parameter values are different). Here, first create an object in data.

The code is as follows:

data(){
    return{  
        //......
        listObject:{
            DogOne:'Black back',
            DogTwo:'poodle',
            DogThree:'Golden hair'
        }
    }
},

When looping in the template, for better semantics, we change the parameters to value, key and index, and then loop.

<ul>
    <li v-for="(value,key,index) in listObject" :key="key">
        [{{index}}]{{value}}-{{key}}
    </li>
</ul>

After writing, you can preview in the browser and get the results you want.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
        data(){
            return{
                newTodoText: 'willem',
                todos: [
                  {
                    id: 1,
                    title: 'Do the dishes',
                  },
                  {
                    id: 2,
                    title: 'Take out the trash',
                  },
                  {
                    id: 3,
                    title: 'Mow the lawn'
                  }
                ],
                nextTodoId: 4
            }
        },
        methods:{
            handleChangeBtnClick(){
                var num = this.nextTodoId++;
                this.todos.push({
                    id: num,
                    title: this.newTodoText+num
                })
            }
        },
        template:`
            <button @click="handleChangeBtnClick">Point me to change</button>
             <!-- Array object traversal -->
             <div v-for="(value, key, index) in todos">
                 ID: {{value.id}}
                 title:{{value.title}}
             </div>
        `
    })
    const vm=app.mount("#app")
</script>
</html>


Well, that's all the content of this article. I hope you can practice these contents, because they are basically used every day after work.

The next article continues to explain some considerations when how to use the v-for loop list.

Tags: Linux Operation & Maintenance Vue server

Posted on Wed, 01 Dec 2021 12:31:19 -0500 by pages