当前位置：首页 > VUE

vue input实现v model

2026-02-24 19:08:02VUE

实现 v-model 的基本用法

在 Vue 中，v-model 是用于实现表单元素双向数据绑定的语法糖。对于 <input> 元素，v-model 会自动根据输入类型绑定对应的属性和事件。

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

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

自定义组件实现 v-model

在自定义组件中实现 v-model，需要定义 model 选项或使用 Vue 2.6+ 的 v-model 语法。

vue input实现v model

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input 
          :value="value"
          @input="$emit('input', $event.target.value)"
        >
      `
    }
  }
}
</script>

Vue 3 中的 v-model 变化

Vue 3 对 v-model 进行了改进，默认使用 modelValue 作为 prop，update:modelValue 作为事件。

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['modelValue'],
      emits: ['update:modelValue'],
      template: `
        <input 
          :value="modelValue"
          @input="$emit('update:modelValue', $event.target.value)"
        >
      `
    }
  }
}
</script>

修饰符的使用

v-model 支持修饰符来改变默认行为，常见的有 .lazy、.number 和 .trim。

vue input实现v model

<template>
  <!-- 在 change 事件后同步 -->
  <input v-model.lazy="message">

  <!-- 自动将输入转为数字 -->
  <input v-model.number="age" type="number">

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

多选输入绑定

对于复选框和单选按钮，v-model 的绑定方式有所不同。

<template>
  <!-- 单个复选框 -->
  <input type="checkbox" v-model="checked">

  <!-- 多个复选框 -->
  <input type="checkbox" value="A" v-model="checkedItems">
  <input type="checkbox" value="B" v-model="checkedItems">

  <!-- 单选按钮 -->
  <input type="radio" value="One" v-model="picked">
  <input type="radio" value="Two" v-model="picked">
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      checkedItems: [],
      picked: ''
    }
  }
}
</script>

文本域绑定

<textarea> 元素使用 v-model 的方式与普通输入框类似。

<template>
  <textarea v-model="message" placeholder="请输入多行文本"></textarea>
</template>

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