<template>
  <div id="app">
    <h1>To-Do List</h1>
    
    <!-- 输入框和提交按钮 -->
    <div>
      <input 
        v-model="newTask" 
        type="text" 
        placeholder="添加新的任务" 
        @keyup.enter="addTask" 
      />
      <button @click="addTask">添加任务</button>
    </div>

    <!-- 任务列表 -->
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <span>{{ task }}</span>
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',        // 输入框绑定的数据
      tasks: [],          // 任务列表数组
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push(this.newTask.trim());  // 添加任务
        this.newTask = '';  // 清空输入框
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);  // 删除任务
    },
  },
};
</script>

<style>
/* 简单的样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
input {
  padding: 10px;
  font-size: 16px;
  margin-right: 10px;
}
button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  background-color: #f9f9f9;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
}
</style>
