Recycle use v-for instructions.
v-for instructions need to be specified with site in sites special grammar of form sites is a source data array and site is an alias for the iteration of array elements.
Template You can also provide the second parameter as the key name: The third parameter is the index: We can process the elements of the array and then display them, and we can generally return the filtered or sorted array by creating a calculated attribute. Even numbers in the output array: The above examples are used together. v-for can bind data to an array to render a list: 2.9.1.
v-for example ¶ <div id="app"> <ol> <li v-for="site in sites"> {{ site.text }} li> ol> div> <script> const app = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') script>
v-for an optional second parameter is also supported, whose value is theindex of the current item: 2.9.2.
v-for example ¶ index is the index value of the list item: <div id="app"> <ol> <li v-for="(site, index) in sites"> {{ index }} -{{ site.text }} li> ol> div> <script> const app = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') script>
for use in v-for : 2.9.3.
v-for ¶ <ul><templatev-for="site in sites"><li>{{ site.text }}li><li>--------------li>template>ul>
v-for iterative object ¶ v-for can iterate over data through the properties of an object: 2.9.4.
v-for ¶ <divid="app"><ul><liv-for="value in object">{{ value }}li>ul>div><script>const app = { data() { return { object: { name: 'Rookie Tutorial', url: 'http://www.runoob.com', slogan: 'Learning is not only about technology, but also about dreams！' } } } } Vue.createApp(app).mount('#app')script>
2.9.5.
v-for ¶ <divid="app"><ul><liv-for="(value, key) in object">{{ key }} : {{ value }}li>ul>div>
2.9.6.
v-for ¶ <divid="app"><ul><liv-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}li>ul>div>
v-for iterative integer ¶ v-for can also loop integers. 2.9.7.
v-for ¶ <divid="app"><ul><liv-for="n in 10">{{ n }}li>ul>div>
Show filtered / sorted results ¶
2.9.8.
v-for example ¶ <divid="app"><ul><liv-for="n in evenNumbers">{{ n }}li>ul>div>
v-for/v-if joint use ¶ v-for/v-if give select to set the default value: 2.9.9.
v-for/v-if example ¶ v-for loop out the list v-if set the selection value: <divid="app"><select@change="changeVal($event)"v-model="selOption"><templatev-for="(site,index) in sites":site="site":index="index":key="site.id">