Home >Web Front-end >JS Tutorial >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:
Introduction to the v for command in the vue component and analysis of alarm problems when using v-forTutorial on the loop use of the v-for command for common Vue.js commandsvue.js instruction v-for usage and index acquisitionThe 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!