当前位置：首页 > VUE

vue实现input

2026-01-07 18:22:41VUE

Vue 实现 Input 输入框的方法

基本双向绑定

使用 v-model 指令实现双向数据绑定，适用于大多数表单场景：

<template>
  <input v-model="inputValue" placeholder="请输入内容">
</template>

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

自定义表单组件

封装可复用的 Input 组件，支持属性传递和事件监听：

vue实现input

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

<script>
export default {
  props: {
    value: String,
    placeholder: String,
    type: {
      type: String,
      default: 'text'
    }
  }
}
</script>

表单验证

结合 VeeValidate 或 Element UI 实现验证功能：

<template>
  <input 
    v-model="email"
    v-validate="'required|email'"
    name="email"
    type="email"
  >
  <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
</template>

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

修饰符使用

Vue 提供多个输入修饰符简化开发：

vue实现input

<input v-model.trim="text">  <!-- 自动去除首尾空格 -->
<input v-model.number="age" type="number">  <!-- 自动转为数字类型 -->
<input v-model.lazy="msg">  <!-- 失焦时更新数据 -->

第三方组件集成

使用 Element UI 的 Input 组件示例：

<template>
  <el-input 
    v-model="input"
    placeholder="请输入内容"
    clearable
    @change="handleChange"
  >
    <template slot="prepend">Http://</template>
  </el-input>
</template>

高级功能实现

自定义输入限制（如仅允许数字）：

<template>
  <input 
    v-model="numericValue"
    @keypress="isNumber($event)"
  >
</template>

<script>
export default {
  methods: {
    isNumber(evt) {
      const charCode = evt.which ? evt.which : evt.keyCode
      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        evt.preventDefault()
      }
    }
  }
}
</script>