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属性的值。

<p>Name: {{ person.name }}</p>
<p>Age: {{ person.age }}</p>
<p>Occupation: {{ person.occupation }}</p>

 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指令遍历数组，并使用点语法调用对象的属性。

<ul><li v-for="person in people"><p>Name: {{ person.name }}</p><p>Age: {{ person.age }}</p><p>Occupation: {{ person.occupation }}</p></li>
</ul>

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