vue怎么实现表单

Vue 表单实现方法

双向数据绑定 使用 v-model 指令实现表单元素与 Vue 实例数据的双向绑定。适用于 input、textarea、select 等表单元素。

<template>
  <input v-model="username" placeholder="请输入用户名">
  <textarea v-model="description"></textarea>
  <select v-model="selectedOption">
    <option value="A">选项A</option>
    <option value="B">选项B</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      description: '',
      selectedOption: 'A'
    }
  }
}
</script>

表单验证 Vue 本身不提供内置验证功能，可通过以下方式实现：

• 手动验证：在提交时检查数据
• 使用第三方库如 VeeValidate、Element UI 表单验证

<template>
  <form @submit.prevent="submitForm">
    <input v-model="email" type="email">
    <span v-if="error">{{ error }}</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      error: ''
    }
  },
  methods: {
    submitForm() {
      if (!this.email.includes('@')) {
        this.error = '请输入有效的邮箱地址'
        return
      }
      // 提交逻辑
    }
  }
}
</script>

动态表单 通过 v-for 实现动态生成的表单字段。

<template>
  <div v-for="(field, index) in formFields" :key="index">
    <label>{{ field.label }}</label>
    <input v-model="field.value" :type="field.type">
  </div>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { label: '用户名', type: 'text', value: '' },
        { label: '密码', type: 'password', value: '' }
      ]
    }
  }
}
</script>

表单提交处理 使用 @submit 事件监听器处理表单提交，通常需要阻止默认行为。

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      // 表单提交逻辑
      console.log('表单已提交')
    }
  }
}
</script>

表单组件封装 将表单逻辑封装为可复用的组件，通过 props 接收配置，$emit 触发提交事件。

<!-- FormComponent.vue -->
<template>
  <form @submit.prevent="$emit('submit', formData)">
    <slot></slot>
  </form>
</template>

<script>
export default {
  props: ['initialData'],
  data() {
    return {
      formData: this.initialData || {}
    }
  }
}
</script>

第三方UI库表单 使用如 Element UI、Ant Design Vue 等提供的表单组件，通常包含验证、布局等高级功能。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { username: '' },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交逻辑
        }
      })
    }
  }
}
</script>