循环使用 v-for 指令。

 

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

 

v-for 可以绑定数据到数组来渲染一个列表：

 

v-for 实例

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