当前位置：首页 > VUE

vue怎么实现input绑定

2026-02-22 00:21:54VUE

实现双向绑定

在Vue中通过v-model指令实现input元素的双向数据绑定。该指令会自动将输入框的值与Vue实例的数据属性同步。

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

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

修饰符使用

Vue为v-model提供了多个修饰符来处理不同场景下的输入需求。

.lazy修饰符将同步时机从input事件改为change事件

<input v-model.lazy="message">

.number自动将输入值转为数字类型

<input v-model.number="age" type="number">

.trim自动去除用户输入的首尾空白字符

<input v-model.trim="username">

自定义组件绑定

在自定义组件中实现v-model需要定义model选项并处理value属性和input事件。

vue怎么实现input绑定

<template>
  <custom-input v-model="searchText"></custom-input>
</template>

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

自定义组件实现：

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
</template>

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

多选框绑定

处理多选框时需要绑定到数组类型数据。

<template>
  <input type="checkbox" v-model="checked" id="checkbox">
  <label for="checkbox">{{ checked }}</label>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

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

vue怎么实现input绑定

<template>
  <input type="checkbox" v-model="hobbies" value="reading">阅读
  <input type="checkbox" v-model="hobbies" value="sports">运动
  <p>选择的爱好: {{ hobbies }}</p>
</template>

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

单选按钮绑定

单选按钮组绑定到同一个数据属性。

<template>
  <input type="radio" v-model="gender" value="male">男
  <input type="radio" v-model="gender" value="female">女
  <p>选择的性别: {{ gender }}</p>
</template>

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

下拉选择框绑定

select元素绑定到数据属性，多选时使用multiple属性。

<template>
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
  </select>
  <p>选择的值: {{ selected }}</p>
</template>

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

多选下拉框：

<template>
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
  </select>
  <p>选择的值: {{ selected }}</p>
</template>

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

动态选项绑定

使用v-for动态生成选项。

<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' }
      ]
    }
  }
}
</script>