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

首页 / 知识

Vue.v-for 实例分享

2023-04-11 16:34:00

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>
 

分享支持参数索引列表实例

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢