【vue】vue中遍历数组和对象

在vue的开发中，我们经常需要对数组和对象进行遍历，以便在页面中展示数据。本文将介绍vue中遍历数组和对象的两种方式：通过v-for指令遍历和通过js的Object.keys()方法遍历。

遍历数组--v-for指令

在vue中，我们可以通过v-for指令来遍历数组。可以使用v-for指令在template标签中对数组进行遍历，然后利用{{}}输出遍历的结果。

下面是一个基本的v-for指令的语法格式：

<template>
  <div>
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

上述代码中的list是一个由多个字符串组成的数组，我们利用v-for指令遍历数组中的每个元素，并使用{{item}}输出每个元素的内容。

遍历对象--Object.keys()方法

遍历对象相对于遍历数组来说就要稍微复杂一些。vue并没有内置一个v-for的语法来遍历对象，但是我们可以利用javascript中的Object的静态方法keys()来遍历对象。

Object.keys()方法：该方法返回一个对象所有可枚举属性的数组。当我们需要遍历对象时，可以通过该方法获取该对象中所有的属性名，然后通过v-for指令遍历该数组。

下面的代码展示了如何在vue中利用Object.keys()方法来遍历对象：

<template>
  <div>
    <ul>
      <li v-for="(value, key) in obj">{{ key }}：{{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: '小明',
        age: 18,
        gender: '男'
      }
    }
  }
}
</script>

上述代码中我们先在data中定义了一个obj对象，然后用v-for指令遍历obj对象中所有可枚举属性，通过{{}}输出每个属性的键名和值。

总结

通过本文的介绍，我们了解了vue中遍历数组和对象的两种方法：v-for指令和Object.keys()方法。我们可以根据具体需求来选择不同的方法对数据进行遍历，以便在页面中展示数据。