vue中的todolist

<template>
  <div class="hello">
    <input text="type" v-model="todo" />
    <button @click="addData()">增加</button>
    <hr />
    <h2>待办</h2>
    <ul>
      <li v-for="(item,index) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" />
        {{item.title}}
        <button @click="removeData(index)">删除</button>
      </li>
      <br />
    </ul>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,index) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" />
        {{item.title}}
        <button @click="removeData(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    //数据
    return {
      todo: "",
      list: []
    };
  },
  methods: {
    addData() {
      this.list.push({
        title: this.todo,
        checked: false
      });
      this.todo=""
    },
    removeData(index) {
      this.list.splice(index, 1);
    }
  }
};
</script>
<style scoped>
</style>