<section id="todoapp"> <header class="header"> <h1><a href="table.html">小小记事本</a></h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"></input> </header> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in list"> <div class="view"> <span class="index">{{ index+1 }}.</span> <label v-if="!item.editing">{{ item.content }}</label> <input v-else v-model="item.content" @keyup.enter="save(index)" @blur="save(index)" class="edit"> <button class="edit-button" @click="edit(index)" v-if="!item.editing">编辑</button> <button class="save-button" @click="save(index)" v-if="item.editing">保存</button> <button class="destroy" @click="remove(index)"></button> </div> </li> </ul> </section> <footer class="footer" v-show="list.length!==0"> <span class="todo-count" v-if="list.length!==0"> <strong>{{ list.length }}</strong> items left </span> <button v-show="list.length!==0" class="clear-completed" @click="clear"> Clear </button> </footer> </section>在这里面加入增、删的功能

要实现增删功能，需要在Vue实例中添加相应的方法，以下是一个简单的实现：

new Vue({
  el: '#todoapp',
  data: {
    inputValue: '',
    list: []
  },
  methods: {
    add() {
      if (this.inputValue.trim() === '') {
        return;
      }
      this.list.push({
        content: this.inputValue.trim(),
        editing: false
      });
      this.inputValue = '';
    },
    remove(index) {
      this.list.splice(index, 1);
    }
  }
});

在上述代码中，`add` 方法用于添加新的任务，如果输入框中的值为空，则不进行添加。添加时，将输入框中的值作为新任务的内容，同时将 `editing` 属性设置为 `false`，表示该任务当前不处于编辑状态。添加完成后，将输入框中的值清空。

`remove` 方法用于删除任务，传入要删除的任务在数组中的索引，使用 `splice` 方法将其从数组中删除。

需要注意的是，上述代码只实现了最基本的增删功能，还需进一步完善。例如，可以添加任务的完成状态，以便更好地管理任务。