关于Vue. v-for 迭代对象

关于Vue. v-for 迭代对象
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>
 

推荐阅读