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

在Vue开发中，获取input输入框的值是一项非常常见的操作。无论是用户登录表单、搜索框还是其他需要用户输入数据的场景，都需要准确获取用户输入的值并进行相应的处理。下面将介绍几种在Vue中获取input输入框值的方法。

1. v-model指令

v-model指令是Vue中用于实现双向数据绑定的一种便捷方式。通过在input元素上使用v-model指令，可以将输入框的值与Vue实例中的数据进行双向绑定。

示例代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue">
    <p>输入的值为：{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

在上述代码中，v-model指令将input输入框的值与inputValue数据进行了双向绑定，当用户在输入框中输入内容时，inputValue的值会实时更新，反之亦然。

2. 事件监听

除了使用v-model指令外，还可以通过监听input事件来获取输入框的值。当输入框的值发生变化时，会触发input事件，在事件处理函数中可以获取到输入框的最新值。

示例代码如下：

<template>
  <div>
    <input type="text" @input="handleInput">
    <p>输入的值为：{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.target.value;
    }
  }
};
</script>

在上述代码中，通过监听input事件，并在事件处理函数handleInput中获取到输入框的最新值，并将其赋值给inputValue。

3. ref引用

还可以通过ref引用的方式获取到输入框的DOM元素，然后通过DOM元素的value属性获取输入框的值。

示例代码如下：

<template>
  <div>
    <input type="text" ref="inputRef">
    <button @click="getValue">获取值</button>
    <p>输入的值为：{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    getValue() {
      this.inputValue = this.$refs.inputRef.value;
    }
  }
};
</script>

在上述代码中，通过ref引用获取到输入框的DOM元素，然后在getValue方法中获取到输入框的值，并将其赋值给inputValue。

以上就是在Vue中获取input输入框值的几种常见方法，开发者可以根据具体的需求选择合适的方法来获取输入框的值。