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">