VueJS中点击按钮或回车触发addTask后如何清空输入框？

你遇到的问题其实是没摸透Vue数据驱动视图的核心逻辑——既然用了v-model="newTask"做双向绑定，直接操作DOM（比如改innerHTML）肯定没用，因为输入框的内容是由Vue实例里的newTask数据控制的，不是DOM本身。

正确的做法：操作绑定的数据，而非DOM #

在你的addTask方法里，只需要把newTask设为空字符串就行，v-model会自动帮你同步到输入框，代码示例如下：

new Vue({
  el: '#todo',
  data: {
    newTask: '', // 与输入框绑定的数据
    todoList: []
  },
  methods: {
    addTask() {
      // 先过滤空白内容，避免添加无效任务
      const taskContent = this.newTask.trim();
      if (taskContent) {
        this.todoList.push(taskContent);
        // 核心：清空绑定的数据，输入框会自动同步清空
        this.newTask = '';
      }
    }
  }
})

为什么之前的方法无效？ #

1. 输入框是表单元素，它的内容存在value属性里，不是innerHTML（innerHTML一般用于元素的内部HTML内容）。就算你改成document.getElementById("inp").value = ""能暂时清空输入框，但会导致Vue的数据newTask和输入框内容不一致，后续操作很可能出问题。
2. Vue的设计初衷就是让开发者通过操作数据来控制视图，直接操作DOM会破坏双向绑定的同步关系，这完全不符合Vue的开发规范。

内容的提问来源于stack exchange，提问作者smontoro14