vue怎么获取input输入框的值

百变鹏仔 3个月前 (09-25) #VUE

文章标签输入框

在 vue 中获取 input 输入框的值有三种方法：1. v-model 指令用于双向数据绑定；2. .value 属性直接访问当前值；3. @input 事件在值改变时触发，用于获取最新值。

如何在 Vue 中获取 input 输入框的值

在 Vue 中，获取 input 输入框的值主要有以下几种方法：

1. v-model 指令

v-model 指令是一种双向数据绑定指令，它可以自动同步 input 输入框的值和 Vue 实例中绑定的数据值。

立即学习“前端免费学习笔记（深入）”；

<input v-model="inputValue">

使用 v-model 指令时，inputValue 变量将自动绑定到 input 输入框的值。

2. .value 属性

.value 属性允许直接访问 input 输入框的当前值。

<input ref="input"><script>  export default {    methods: {      getValue() {        console.log(this.$refs.input.value);      },    },  };</script>

3. @input 事件

@input 事件在 input 输入框的值发生变化时触发。它可以用来获取最新的值。

<input><script>  export default {    methods: {      handleInput(event) {        console.log(event.target.value);      },    },  };</script>

文章推荐