<div id="app">
  <div v-for="(item,index) of list" :key="item.id">
    <div>
      {{item.name}} --- {{index}}
    </div>
    <span>
      {{item.name}}
    </span>
  </div>
  <template v-for="(item,index) of list" :key="item.id">
    <div>
      {{item.name}} --- {{index}}
    </div>
    <span>
      {{item.name}}
    </span>
  </template>
</div>
var app = new Vue({
  el: "#app",
  data: {
    list: [
      {
        name: "xiao",
        id: "00001"
      },
      {
        name: "dong",
        id: "00002"
      },
      {
        name: "xi",
        id: "00003"
      },
      {
        name: "er",
        id: "00004"
      }
    ]
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js