当前位置：首页 > VUE

vue实现绑定输入参数

2026-02-25 18:46:34VUE

绑定输入参数的方法

在Vue中，可以通过v-model指令实现双向数据绑定，将输入元素的值与Vue实例的数据属性动态关联起来。

<template>
  <input v-model="inputValue" placeholder="请输入内容">
  <p>输入的内容是：{{ inputValue }}</p>
</template>

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

自定义组件参数绑定

对于自定义组件，可以使用v-model实现父子组件间的双向绑定。子组件需要声明model选项并触发input事件。

<!-- 父组件 -->
<template>
  <CustomInput v-model="parentValue" />
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      parentValue: ''
    }
  }
}
</script>

<!-- 子组件 CustomInput.vue -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

修饰符使用

Vue为v-model提供了多个修饰符来处理不同类型的输入：

<!-- 自动去除首尾空白 -->
<input v-model.trim="text">

<!-- 自动转为数字类型 -->
<input v-model.number="age" type="number">

<!-- 延迟更新（触发change事件而非input事件） -->
<input v-model.lazy="msg">

多个复选框绑定

多个复选框可以绑定到同一个数组：

<template>
  <input type="checkbox" v-model="checkedNames" value="Jack">
  <input type="checkbox" v-model="checkedNames" value="John">
  <input type="checkbox" v-model="checkedNames" value="Mike">
</template>

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

单选按钮绑定

单选按钮通过v-model绑定到同一个变量：

<template>
  <input type="radio" v-model="picked" value="One">
  <input type="radio" v-model="picked" value="Two">
</template>

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

下拉选择框绑定

使用v-model绑定select元素：

<template>
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
  </select>
</template>

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