vue实现input type=

实现 Vue 中的 input 类型

在 Vue 中实现不同类型的 input 元素可以通过 v-model 进行数据绑定，同时结合 HTML5 的 input 类型属性。

基本语法

<input v-model="inputValue" type="text">

v-model 会双向绑定数据到 Vue 实例中的 inputValue 属性。

常见 input 类型示例

文本输入

<input v-model="username" type="text" placeholder="请输入用户名">

密码输入

<input v-model="password" type="password" placeholder="请输入密码">

数字输入

<input v-model="age" type="number" min="0" max="120">

日期选择

<input v-model="birthday" type="date">

复选框

<input v-model="isAgree" type="checkbox"> 我同意协议

单选按钮

<input v-model="gender" type="radio" value="male"> 男
<input v-model="gender" type="radio" value="female"> 女

文件上传

<input type="file" @change="handleFileUpload">

处理表单提交

在 Vue 中处理表单提交通常需要阻止默认行为：

<form @submit.prevent="submitForm">
  <input v-model="email" type="email">
  <button type="submit">提交</button>
</form>

自定义组件中的 v-model

对于自定义组件，需要实现 v-model 的绑定：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

使用方式：

<custom-input v-model="customValue"></custom-input>

表单验证

可以结合 Vue 的 computed 属性或第三方库如 Vuelidate 进行验证：

computed: {
  isEmailValid() {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return re.test(this.email)
  }
}