Vue 四种常用获取输入值的方法
2024-01-10 13:34:59
Vue 中获取输入值：四种常见方法
在 Vue 中，表单输入框是收集用户输入信息的重要组件。为了获取用户在输入框中输入的值，我们可以使用四种常用的方法：
- v-model
- @input
- @change
- ref
v-model：双向数据绑定
v-model 是 Vue 中最常用的获取输入值的方法。它使用双向数据绑定，将输入框的值与 Vue 实例中的数据绑定在一起。当用户在输入框中输入内容时，Vue 实例中的数据也会相应更新。
优点：
- 简单易用
- 适用于大多数场景
缺点：
- 只支持具有 name 属性的输入框
- 不适用于带有 v-for 指令的动态创建的输入框
示例：
<input v-model="name">
@input：事件监听
@input 方法使用事件监听器来监听输入框的输入事件。当用户在输入框中输入内容时，事件监听器就会触发，我们可以通过事件监听器来获取输入框中的值。
优点：
- 适用于所有类型的输入框
- 允许我们在每次输入内容时获取值
缺点：
- 可能会导致性能问题（每次输入都会触发事件监听器）
示例：
<input @input="onInput">
onInput(event) {
console.log(event.target.value)
}
@change：离开输入框时触发
@change 方法与 @input 类似，也是使用事件监听器来监听输入框的 change 事件。但是，@change 事件只有在用户离开输入框时才会触发，而 @input 事件在用户每次输入内容时都会触发。
优点：
- 适用于需要在用户离开输入框时获取值的场景
缺点：
- 可能会导致延迟（仅在用户离开输入框时触发事件监听器）
示例：
<input @change="onChange">
onChange(event) {
console.log(event.target.value)
}
ref：获取输入框引用
ref 方法使用 ref 属性来获取输入框的引用。我们可以通过 ref 属性来访问输入框的 DOM 元素，然后就可以通过 DOM 元素的 value 属性来获取输入框中的值。
优点：
- 可以获取输入框的 DOM 元素
- 适用于需要获取输入框的 DOM 元素的场景
缺点：
- 相对复杂
示例：
<input ref="inputRef">
console.log(this.$refs.inputRef.value)
总结
这四种方法各有优缺点，适合不同的场景。我们可以根据不同的需求选择合适的方法来获取输入值。
常见问题解答
-
哪种方法最常用？
v-model 是最常用的方法，因为它简单易用，适用于大多数场景。 -
什么时候使用 @input？
@input 适用于需要在每次输入内容时获取值的情况，例如实时验证输入。 -
什么时候使用 @change？
@change 适用于需要在用户离开输入框时获取值的场景，例如提交表单。 -
ref 有什么用？
ref 可以获取输入框的 DOM 元素，这在某些情况下可能很有用，例如获取输入框的尺寸或位置。 -
我可以同时使用多种方法吗？
可以，这取决于你的具体需求。例如，你可以使用 v-model 来绑定输入框的值，并使用 @input 来进行实时验证。
