vue获取input值的三种常用写法

下面详细讲解“vue获取input值的三种常用写法”的完整攻略，过程中包含两条示例说明。

一、获取input的value值

1. 使用v-model双向绑定

在Vue中，可以使用v-model指令将表单元素的值绑定到Vue实例上，实现双向绑定。例如：

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

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

在上述例子中，当我们在input框中输入数据时，message变量会自动更新为当前输入框的值，并且在下方会实时展示输入框的值。

2. 使用ref标识符

使用ref标识符可以获取到DOM节点，而后通过该DOM节点的value属性值获取input元素中的值。例如：

<template>
  <div>
    <input type="text" ref="input">
    <button @click="getInputValue">获取input框的值</button>
    <p>获取到input框的值：{{inputValue}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    getInputValue() {
      this.inputValue = this.$refs.input.value //通过ref获取到DOM节点
    }
  }
}
</script>

在上述例子中，我们可以通过ref获取到input的DOM节点，在事件处理函数中获取到该DOM节点的值，并将该值赋给inputValue变量，以展示input框的值。

二、获取checkbox/radio的选中状态

1. 使用v-model

可以将v-model应用到checkbox或radio上。当多个checkbox或radio绑定到同一个变量时，在选中其中一个后，该变量的值即改变。例如：

<template>
  <div>
    <input type="checkbox" id="ai" value="AI" v-model="checkedValues">
    <label for="ai">AI</label><br>
    <input type="checkbox" id="big-data" value="Big Data" v-model="checkedValues">
    <label for="big-data">Big Data</label><br>
    <p>已选择的领域：{{ checkedValues }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedValues: []
    }
  }
}
</script>

在上述例子中，当我们选中了AI或Big Data后，checkedValues即被赋值为对应的数组。

2. 使用@change事件

使用@change事件获取checkbox或radio的选中状态。例如：

<template>
  <div>
    <input type="radio" name="gender" value="male" @change="onGenderChanged('male')">
    <label for="male">男</label><br>
    <input type="radio" name="gender" value="female" @change="onGenderChanged('female')">
    <label for="female">女</label><br>
    <p>当前选择的性别：{{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  },
  methods: {
    onGenderChanged(value) {
      this.gender = value // 将选中的值赋给gender变量
    }
  }
}
</script>

在上述例子中，我们使用@change事件将选中的值赋给了gender变量。