1. {{ index }} -{{ site.text }}

Vue.v-for 实例分享

Vue.v-for 实例分享
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>
 

推荐阅读