v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

 

v-for

<div id="app">

  <ul>

    <li v-for="value in object">

    {{ value }}

    </li>

  </ul>

</div>

 

<script>

const app = {

  data() {

    return {

      object: {

        name: '菜鸟教程',

        url: 'http://www.runoob.com',

        slogan: '学的不仅是技术，更是梦想！'

      }

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>

 

 

你也可以提供第二个的参数为键名：

 

v-for

<div id="app">

  <ul>

    <li v-for="(value, key) in object">

    {{ key }} : {{ value }}

    </li>

  </ul>

</div>

 

 

第三个参数为索引：

 

v-for

<div id="app">

  <ul>

    <li v-for="(value, key, index) in object">

     {{ index }}. {{ key }} : {{ value }}

    </li>

  </ul>

</div>