Vue中使用 v-for 循环遍历对象

Vue中使用 v-for 循环遍历对象

start

• 经常使用 v-for 去遍历我们的数组，然后渲染页面。
• 其实也可以遍历对象，下面介绍一下遍历对象的写法。

代码示例

<template>
  <div id="app">
    <div v-for="(value, key) in obj" :key="key" class="box">
      value :{{ value }}
      <br />

      key :{{ key }}
    </div>

    <br />
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        a: 1,
        b: 1,
        c: 1,
        d: 1,
      },
    }
  },
}
</script>

<style lang="scss">
.box {
  width: 300px;
  margin-bottom: 30px;
  background: tomato;
}
</style>

截图

注意事项

• 遍历对象顺序是无序的，如果对顺序有要求，请使用数组的方式。
• 总结一下遍历对象和数组的区别，就是对象中属性值，属性名，而数组是项，索引。