Vue 3 表单输入控件数据处理

在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。

input 事件处理

要监听 input 输入框的事件，我们使用 @input 事件，在用户输入每个字符的时候，都会触发这个事件。

<input id="username" type="text" @input="handleInput" />

我们可以在事件处理函数中，直接访问到 event 这个 javascript 原生事件对象，这样可以像普通 js 一样，使用 event.target.value 来访问输入框的值：

// js
methods: {
	handleInput(e) {
		console.log(e.target.value);
	},
},

value 赋值

但是如果想在页面其它部分同时展示用户输入的数据，那么需要把用户输入的值保存到 data 属性中：

data() {
  return {
  	username: "",
  };
},

然后在事件处理函数中，给这个属性赋值：

methods: {
  handleInput(e) {
    this.username = e.target.value;
  },
},

这样在 html 模板中就可以访问它了，并且会随着用户的输入，自动更新模板视图：

<p>你输入的用户名是：{{ username }}</p>

这个时候，input 就算是和属性进行绑定了，在用户输入的时候，触发 input 事件，input 事件更新属性的值，html 中用到这个属性的地方会自动更新。

示例

我们来看一下具体的示例。假设我们想让用户输入用户名，并在下边实时显示它的输入，我们来看看怎么实现。打开我们的 vue.js 模板项目，在 index.html 文件里，我们：

• 定义一个 class 为 input-field 的 div 元素，用来布局。
• 然后我们在它的里边先定义一个 label，给它的 for 属性设置为 username， label 的值为用户名。
• 接下来定义 input 输入控件，id 设置为 username 和 label 的 for 属性保持一致，type 为 text 文本输入框。
• input 输入框监听 input 事件，给它传递一个名字为 handleInput 的事件处理函数，我们一会儿再定义它。

<div class="input-field">
  <label for="username">用户名：</label>
  <input id="username" type="text" @input="handleInput" />
</div>

我们现在先看一下 handleInput 函数的定义，打开 index.js，在 vue 的配置对象里，添加 methods 配置，再在里边定义 handleInput 方法，在 vue 中，触发事件的时候会自动传递原生的 JS 事件对象到处理函数中，那么我们在 handleInput 函数中，接收这个事件对象，然后在函数体里，先打印一下用户的输入，这里可以通过 e.target.value 来访问到 input 输入框中，用户输入的内容：

methods: {
  handleInput(e) {
    console.log(e.target.value);
  },
},

好，我们运行一下示例，打开浏览器的开发者工具，我们一会在 console 面板里看一下日志。在输入框里，我们输入几个测试字符（如 abc，张三），可以看到，我们每输入一个字符，handleInput 这个事件处理函数就执行了一次，打印出了当前 input 输入框中的内容。

显示用户输入

接下来我们要在 html 中显示用户的输入，那么这个时候我们在 index.html 中，在 class 为 input-field 的 div 的下边，定义一个 class 为 result 的 div 元素，在它里边用一个 p 元素来显示『你输入的用户名是：』，后面跟上用户动态的输入，现在，我们还没办法直接使用 input 输入框中的值，因为 html 模板只能访问 data 属性、computed 计算属性和有返回值的方法中的值。那么我们先在这里写上{{username}}，之后在 data 属性中定义它：

<div class="result">
  <p>你输入的用户名是：{{ username }}</p>
</div>

接下来，打开 index.js，在 data 函数返回的对象中，加上一个 username 属性，默认值为空：

data() {
  return {
    username: "",
  };
},

那么，为了让用户输入内容的时候，实时的反应到 p 元素里边，我们需要同步用户输入到 username 属性中，在 handleInput 事件处理函数中，把 username 的值设置为输入框中的值，这样在用户输入的时候，就把值同步给 username 了：

handleInput(e) {
  this.username = e.target.value;
},

好，我们再运行一下示例，在输入框中输入几个测试字符（如：abc，张三），可以看到下方的 p 元素同步的显示了用户输入的值。这样绑定用户输入的值到 data 的 username 属性之后，在计算属性、其它方法和 watch 中，也就能根据用户输入，做一些响应的业务逻辑处理了。

小结

好了，这个就是在 vue 中，使用传统的事件监听的方式，来处理表单输入的过程，主要是给 input 输入框添加 input 事件，然后在 input 事件中，把值同步到 data 中的属性里。