Vue中对对象内容调用的Demo

目录

1.对象作为数据：

 2.对象数组

---

在Vue中，你可以通过对象的键来调用对象中的各个部分的内容。下面是一些使用Vue调用对象各部分内容的示例：

1.对象作为数据：

如果你在Vue实例的数据中有一个对象，你可以使用点语法来访问对象中的各个属性。

data() {
  return {
    person: {
      name: 'John',
      age: 25,
      occupation: 'Developer'
    }
  }
}

在模板中，你可以通过{{ person.name }}、{{ person.age }}和{{ person.occupation }}来分别调用对象中的name、age和occupation属性的值。

Name: {{ person.name }}
Age: {{ person.age }}
Occupation: {{ person.occupation }}

 2.对象数组

如果对象是一个数组中的一部分，你可以使用v-for指令遍历数组，并通过点语法调用对象中的属性。

data() {
  return {
    people: [
      { name: 'John', age: 25, occupation: 'Developer' },
      { name: 'Jane', age: 30, occupation: 'Designer' },
      { name: 'Mike', age: 35, occupation: 'Manager' }
    ]
  }
}

在模板中，用v-for指令遍历数组，并使用点语法调用对象的属性。

  

    
Name: {{ person.name }}
    
Age: {{ person.age }}
    
Occupation: {{ person.occupation }}
  

通过上述方式，你可以调用对象中各个部分的内容，无论是单个对象还是对象数组。