vue获取input值的方法

在Vue开发中，获取input输入框的值是一个常见的需求。下面为大家详细介绍几种获取input值的方法。

一、使用v-model指令

v-model是Vue.js中一个非常实用的指令，它能实现双向数据绑定。通过将一个表单元素的值与Vue实例中的一个数据属性进行绑定，当表单元素的值发生变化时，Vue实例中的数据属性也会随之更新，反之亦然。

示例代码如下：

<template>
  <div>
    <input v-model="inputValue" type="text">
    <button @click="showValue">获取值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    showValue() {
      console.log(this.inputValue);
    }
  }
}
</script>

在上述代码中，v-model将input的值绑定到了inputValue数据属性上，当点击按钮时，就可以通过this.inputValue获取到input框中的值。

二、通过ref属性获取

ref属性可以为DOM元素或子组件指定一个引用名称。在需要获取input值时，可以通过这个引用名称来访问对应的DOM元素，进而获取其值。

示例代码如下：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="getValueByRef">获取值</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValueByRef() {
      const inputValue = this.$refs.inputRef.value;
      console.log(inputValue);
    }
  }
}
</script>

这里通过ref给input元素指定了一个名为inputRef的引用，在按钮的点击事件中，通过this.$refs.inputRef获取到input元素，然后通过.value属性获取到输入的值。

三、通过事件绑定获取

还可以通过绑定input事件，在事件处理函数中获取输入的值。

示例代码如下：

<template>
  <div>
    <input @input="handleInput" type="text">
    <button @click="showInputValue">获取值</button>
  </div>
</template>

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

在这个示例中，通过@input指令绑定了input事件，在handleInput方法中，将事件对象中的target.value赋值给data中的inputText属性，之后就可以通过inputText获取输入的值。

以上就是Vue获取input值的几种常见方法，开发者可以根据具体的业务场景选择合适的方式来获取所需的值。