vue实现一个简易待办事项管理界面代码

好的，以下是一个简单的待办事项管理界面的Vue代码：

<template>
  <div>
    <h1>待办事项管理</h1>
    <form>
      <label>
        任务:
        <input type="text" v-model="newTask"/>
      </label>
      <button type="button" @click="addTask">添加</button>
    </form>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button type="button" @click="completeTask(index)">完成</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  data() {
    return {
      newTask: '',
      tasks: []
    }
  },
  methods: {
    addTask() {
      if (this.newTask !== '') {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    },
    completeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
}
</script>

该代码包含一个表单，用于输入新任务，以及一个列表，用于显示现有任务。“添加”按钮将新任务添加到列表中。每个任务旁边有一个“完成”按钮，用于将该任务从列表中删除。