vue 取数组对象的值

Vue 是一种流行的 JavaScript 库，用于构建 Web 应用程序。当我们需要从数组对象中取出值时，我们可以使用 Vue 提供的 v-for 指令来循环遍历数组，并使用对象的键来获取对应的值。以下是取数组对象的值的步骤：

1. 在 Vue 组件中定义一个数组对象：例如，我们定义一个数组对象，包含三个属性：Name，age 和 job。

<template>
  <div>
    <ul>
      <li v-for="(person, index) in people" :key="index">
        <span>{{ person.Name }}</span>
        <span>{{ person.age }}</span>
        <span>{{ person.job }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { Name: "Tom", age: 25, job: "Developer" },
        { Name: "Mary", age: 28, job: "Designer" },
        { Name: "Peter", age: 30, job: "Manager" },
      ],
    };
  },
};
</script>

2. 使用 v-for 指令遍历数组对象：使用 v-for 指令循环遍历数组对象，我们可以获取数组对象的每个属性。

3. 使用对象的键来获取对应的值：通过遍历数组对象，使用对象的键来获取对应的值。在上面的例子中，我们使用 person.Name，person.age 和 person.job 来获取对应的值。

通过以上步骤，我们可以从 Vue 组件中轻松地取出数组对象的值，并展示在页面上。