vue3中怎么使用map函数
时间: 2024-01-17 09:05:54 浏览: 23
在Vue3中,可以使用`v-for`指令来遍历一个数组,并使用`map`函数来对数组进行转换。以下是一个示例:
```html
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const items = ref([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' },
])
// 使用 map 函数将数组中的每个元素转换为新的对象
const modifiedItems = items.value.map(item => {
return { ...item, price: Math.floor(Math.random() * 10) }
})
return {
items: modifiedItems,
}
},
}
</script>
```
在上面的示例中,我们使用`ref`函数创建一个响应式的数组`items`,然后使用`map`函数将每个元素转换为一个新的对象,包含`price`属性。最后,我们将转换后的数组绑定到模板中的`v-for`指令上,以显示每个对象的`name`属性。