遍历数组对象，属性state为1，是未完成，2是进行中，3是超期，4是已撤销 vue3.0 简单写法在js中实现，html用props接受

在Vue 3.0中，遍历数组对象并根据`state`值展示不同状态是非常常见的操作。假设你有一个名为`items`的数组，每个对象都有`state`属性，你可以这样做：

// 示例数据
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`方法用于更新数组内的状态。