<!--模板-->
<template>
  <div>
    <div>
      <input class="item" v-model="inputValue" />
      <button @click="submit">提交</button>
      <ul>
        <todo-item
          v-for="(item, index) of list"
          :key="index"
          :content="item"
          :index="index"
          @delete="mydelete"
        ></todo-item>
      </ul>
    </div>
  </div>
</template>

<script>
import TodoItem from "./TodoItem";
// 此处用来写逻辑,必须空出一行去写
export default {
  // 这块必须用函数去操作，注意缩进，缩进不对的话各路报错
  components: {
    "todo-item": TodoItem,
  },
  data() {
    return {
      inputValue: "",
      list: [],
    };
  },
  methods: {
    submit() {
      this.list.push(this.inputValue);
      this.inputValue = "";
    },
    mydelete(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>
<!--这个标签用于写样式-->
<style scoped>
</style>
