Vue 3 表单输入控件数据处理
2022年10月 · 预计阅读时间: 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 中的属性里。