详解Vue3中的表单写法

最新推荐文章于 2025-06-26 15:15:00 发布

原创最新推荐文章于 2025-06-26 15:15:00 发布 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

Vue 3基础入门教程专栏收录该内容

28 篇文章

订阅专栏

本文聚焦Vue3表单写法，介绍了普通语法和setup语法。普通语法中，v-model指令用于双向绑定，可通过内置和自定义规则实现表单验证，还支持自定义表单组件。setup语法是新特性，结合组合式API和单文件组件，代码更简洁易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

本文主要介绍Vue3中的表单写法。

普通语法

v-model指令：在Vue3中，v-model指令仍然是用来在表单元素和Vue实例的数据之间建立双向绑定关系的。例如，可以使用v-model指令将输入框的值绑定到Vue实例的data属性上：

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

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

表单验证：Vue3中的表单验证可以通过使用内置的校验规则和自定义的校验函数来实现。可以通过在表单元素上添加v-bind指令和动态的class来实现表单的校验状态的显示。

<template>
  <form @submit="submitForm">
    <input v-model="email" :class="{ 'is-invalid': isInvalidEmail }" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isInvalidEmail: false
    };
  },
  methods: {
    submitForm() {
      if (this.email === '') {
        this.isInvalidEmail = true;
      } else {
        // 处理表单提交逻辑
      }
    }
  }
};
</script>

改进的表单处理：在Vue3中，可以使用ref来创建响应式的表单数据，并使用watch来监视数据的变化。这样可以更简洁地处理表单的逻辑。

<template>
  <input v-model="email" />
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const email = ref('');

    watch(email, (newValue, oldValue) => {
      // 处理表单数据的变化
    });

    return { email };
  }
};
</script>

自定义表单组件：Vue3中支持通过自定义组件来实现复杂的表单。可以通过在自定义组件中使用v-model指令，并在组件内部定义value和emit事件来将表单数据传递给父组件。

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const email = ref('');

    return { email };
  }
};
</script>

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

<script>
export default {
  props: ['value']
};
</script>

以上是Vue3中表单的一些基本使用和特性。需要注意的是，在Vue3中，由于使用了Composition API，表单的处理可能会有一些不同的地方，如使用ref、watch等新的API来处理表单数据和校验。

setup语法

在Vue3中，可以使用<script setup lang="ts">语法来编写表单。这种语法是Vue3中的新特性，它结合了组合式API和单文件组件，提供了更简洁和可读性更高的代码编写方式。

下面是一个示例，展示了如何使用<script setup lang="ts">语法来编写一个包含表单的组件：

<template>
  <form @submit="handleSubmit">
    <input v-model="form.email" type="email" placeholder="Email" />
    <input v-model="form.password" type="password" placeholder="Password" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Form {
  email: string;
  password: string;
}

const form = ref<Form>({
  email: '',
  password: ''
});

const handleSubmit = (event: Event) => {
  event.preventDefault();
  // 处理表单提交逻辑
};
</script>

在上面的示例中，我们首先使用import语句导入了ref函数，用于创建响应式的form对象。然后，我们定义了一个Form接口，用于约束form对象的类型。接着，我们使用ref函数创建了一个名为form的响应式对象，其中包含了email和password两个属性。

在<form>标签中，我们使用@submit指令绑定了一个handleSubmit方法，用于处理表单的提交事件。在handleSubmit方法中，我们使用preventDefault阻止表单的默认提交行为，并在此处处理表单的提交逻辑。

在模板中，我们使用v-model指令将表单元素与form对象中的属性进行绑定，实现了表单数据的双向绑定。

总结起来，Vue3中使用<script setup lang="ts">语法编写表单的过程与使用普通的Vue3组件编写方式相似，只是在编写数据和方法时，可以在<script>标签中使用类似于Vue2中的data、methods等配置对象的方式进行编写，并且可以利用TypeScript来提供类型检查和约束。