vue表单怎么实现

Vue 表单实现方法

基础表单绑定

使用 v-model 指令实现双向数据绑定，适用于输入框、单选、复选框等表单元素。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" type="text" placeholder="用户名">
    <input v-model="formData.password" type="password" placeholder="密码">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.formData)
    }
  }
}
</script>

表单验证

可以通过计算属性或第三方库（如 VeeValidate）实现验证逻辑。

<template>
  <form @submit.prevent="handleSubmit">
    <input 
      v-model="formData.email" 
      type="email"
      :class="{ 'error': !isEmailValid }"
    >
    <span v-if="!isEmailValid">请输入有效的邮箱</span>
    <button :disabled="!isFormValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        email: ''
      }
    }
  },
  computed: {
    isEmailValid() {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)
    },
    isFormValid() {
      return this.isEmailValid
    }
  }
}
</script>

动态表单字段

使用 v-for 动态生成表单字段，适合需要增减字段的场景。

<template>
  <form>
    <div v-for="(field, index) in dynamicFields" :key="index">
      <input v-model="field.value">
      <button @click="removeField(index)">删除</button>
    </div>
    <button @click="addField">添加字段</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      dynamicFields: [{ value: '' }]
    }
  },
  methods: {
    addField() {
      this.dynamicFields.push({ value: '' })
    },
    removeField(index) {
      this.dynamicFields.splice(index, 1)
    }
  }
}
</script>

表单组件封装

将表单逻辑封装为可复用组件，提高代码复用性。

<!-- FormInput.vue -->
<template>
  <div>
    <label>{{ label }}</label>
    <input 
      :value="value"
      @input="$emit('input', $event.target.value)"
      :type="type"
    >
    <span v-if="error">{{ error }}</span>
  </div>
</template>

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

第三方表单库

推荐使用 VeeValidate 或 Element UI 的表单组件简化开发。

<template>
  <ValidationObserver v-slot="{ invalid }">
    <form @submit.prevent="submit">
      <ValidationProvider name="邮箱" rules="required|email" v-slot="{ errors }">
        <input v-model="email" type="email">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
      <button :disabled="invalid">提交</button>
    </form>
  </ValidationObserver>
</template>

<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      email: ''
    }
  }
}
</script>

以上方法覆盖了 Vue 表单开发的主要场景，可根据项目需求选择合适方案。