Examples to explain vue v-for data processing

Earlier we shared with you the introduction of the v for command in the vue component and the analysis of alarm problems when using v-for. In this article, we will share with you vue v-for data processing and the basic use of v-for: use v- for="item in list" or v-for="item of list" to traverse, use list:list:[{n:1},{n:2},{n:3},{n:4}, {n:5},{n:6}] is used to facilitate expansion and is closer to actual project requirements.

 <p id="app">
        <ul>
            <li v-for="item in list">{{item.n}}</li>
        </ul>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
            }
        })
    </script>

v-for gives two parameters key and index

The traversed data needs to be divided into arrays and objects and treated separately

There is no key value under the array

The actual display effect of the parameter key value can be obtained under the object as follows:

<p id="app">
        <ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
            </li>
        </ul>
        <p>
            <p v-for="(item,key,index) of obj">
                {{item}}：{{key}}：{{index}}
            </p>
        </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

v-for supports equal number iteration

v-for="n in 10"

With this, you can load data step by step, just control the m value

  <p v-for="i of m">
                {{list[i-1].n}}
            </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                m:3,
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

Note:

You cannot use this binding component when traversing objects. You can only pass in index or other characteristic values ​​in the processing function to select the current list, and then operate directly on the data array app.list[1]={n:33}. Assignment operations cannot trigger page updates

So vue js provides the array data update method of Vue.set(app.list,1,{n:33})

Related recommendations:

The above is the detailed content of Examples to explain vue v-for data processing. For more information, please follow other related articles on the PHP Chinese website!