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

在Vue.js 3.0 中，你可以使用`v-for`指令来遍历数组，并结合条件渲染来展示状态。假设你有一个名为`tasks`的数组，每个任务对象都有`state`属性，可以这样做：

<template>
  <div id="task-list">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task.name }}
        <span> ({{ '状态：' + task.stateText }})</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { computed } from "vue";

// 定义一个计算属性将状态数值转换为文字描述
const stateText = computed(() => {
  return {
    1: '未完成',
    2: '进行中',
    3: '超期',
    4: '已撤销'
  }[task.state];
});

// 假设你有如下的任务数组
let tasks = [
  { name: '任务1', state: 1 },
  { name: '任务2', state: 2 },
  // 更多任务...
];
</script>

<style scoped>
/* 可选：样式部分 */
</style>

在这个例子中，当`task.state`等于1、2、3或4时，对应的文本将会显示出来，实现了对状态的不同处理。