vue遍历对象中的数组取值示例

下面我给您讲解一下“vue遍历对象中的数组取值”这个话题。

在vue.js中，我们经常需要遍历对象中的数组并取出其中的数据。这种需求很常见，而vue提供了非常方便的解决方案。

遍历数组取值的常见方法

例1：利用v-for指令遍历数组并输出数组内元素

下面是一个例子，假设我们的数据对象是这样的：

var data = {
  list: [
    {name: '小明', age: 20},
    {name: '小红', age: 22},
    {name: '小刚', age: 21}
  ]
}

我们要遍历这个数组并输出每个数据项的姓名和年龄。用vue.js实现这个需求非常简单，只需要使用v-for指令即可。

<ul>
  <li v-for="(item, index) in data.list">
    {{ index + 1 }}. {{ item.name }} - {{ item.age }}
  </li>
</ul>

上面的代码中，我们使用v-for指令遍历了data.list数组中的每个元素，并将元素的索引、姓名和年龄输出到页面中。

例2：利用map函数遍历数组，生成新的数组

我们也可以使用JavaScript的map函数遍历数组并生成一个新的数组，并将新数组渲染到页面中。

var data = {
  list: [
    {name: '小明', age: 20},
    {name: '小红', age: 22},
    {name: '小刚', age: 21}
  ]
}

new Vue({
  el: '#app',
  data: data,
  computed: {
    newList: function() {
      return this.list.map(function(item) {
        return item.name + "-" + item.age;
      });
    }
  }
});

上面的代码中，我们定义了一个computed属性newList，该属性利用了JavaScript中的map函数，遍历data.list数组并生成一个新的数组newList。这个新数组中的每个元素都是一个字符串，包含了对应元素的姓名和年龄信息。

然后我们将newList数组渲染到页面中，实现了对数组的遍历和取值。

总结

通过上述两个示例，我们了解了vue中遍历数组取值的两种常见方法：利用v-for指令遍历数组并输出数组内元素和利用map函数遍历数组、生成新的数组。

当然，这两种方法并不是唯一的方法，开发者可以灵活运用数组的内置方法和vue.js提供的指令和API，实现对数组的遍历和取值。