v-for 还支持一个可选的第二个参数,参数值为当前项的索引:
v-for 实例
index 为列表项的索引值:
<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>
模板 <template> 中使用 v-for:
v-for
<ul>
<template v-for="site in sites">
<li>{{ site.text }}</li>
<li>--------------</li>
</template>
</ul>
|