vue中讲对象中一个属性的值另外保存在新数组的代码示例
时间: 2024-05-07 12:16:26 浏览: 89
基于Vue的一个前后端分离系统的介绍及代码示例的介绍.docx
以下是一个将对象中一个属性的值另外保存在新数组的 Vue 代码示例:
```
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }} - {{ item.age }}
</li>
</ul>
<p>年龄列表: {{ ages }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
ages: []
}
},
mounted() {
this.ages = this.items.map(item => item.age)
}
}
</script>
```
在上面的代码示例中,我们使用了 Vue 的指令 `v-for` 来遍历 `items` 数组中的每个对象,并将对象的 `name` 和 `age` 属性展示在页面上。同时,我们定义了一个新的数组 `ages`,用于存储每个对象的年龄。
在 `mounted` 钩子函数中,我们使用 `map` 方法遍历 `items` 数组,并将每个对象的年龄属性提取出来,保存到 `ages` 数组中。最后,在页面上展示 `ages` 数组的内容。
阅读全文