遍历数组对象,属性state为1,是未完成,2是进行中,3是超期,4是已撤销 vue3.0 简单写法在js中实现,html用props接受
时间: 2024-09-20 20:07:47 浏览: 44
在Vue 3.0中,遍历数组对象并根据`state`值展示不同状态是非常常见的操作。假设你有一个名为`items`的数组,每个对象都有`state`属性,你可以这样做:
```javascript
// 示例数据
const items = [
{ id: 1, state: 1 },
{ id: 2, state: 2 },
{ id: 3, state: 3 },
{ id: 4, state: 4 }
];
// 定义一个计算属性来处理状态显示
export default {
props: {
itemStateLabels: {
type: Array,
// 这里可以自定义状态对应的文本标签
default: ['未完成', '进行中', '超期', '已撤销']
}
},
computed: {
formattedItems() {
return this.items.map(item => ({
id: item.id,
status: this.itemStateLabels[item.state]
}));
}
},
template: `
<div>
<ul>
<li v-for="formattedItem in formattedItems" :key="formattedItem.id">
ID: {{ formattedItem.id }}, 状态: {{ formattedItem.status }}
</li>
</ul>
</div>
`,
// 如果需要更新数组状态,记得同步更新`formattedItems`
methods: {
updateItemState(id, newStatus) {
const updatedItems = this.items.map(item =>
item.id === id ? { ...item, state: newStatus } : item
);
this.items = updatedItems;
}
}
};
```
在这个例子中,HTML部分通过`v-for`指令遍历`formattedItems`,并将`state`转换为对应的标签显示。`updateItemState`方法用于更新数组内的状态。
阅读全文