Vue.js 表单处理示例

Vue.js 提供了强大的表单处理功能，可以轻松地实现各种表单验证、数据绑定和动态渲染。以下是一个简单的表单处理示例。

表单基本结构

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="formData.name" required>
      <br>
      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="formData.email" required>
      <br>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      alert('表单提交成功！');
      console.log(this.formData);
    }
  }
};
</script>

表单验证

Vue.js 使用了 v-model 来实现数据双向绑定。在表单元素上使用 required 属性可以实现基本的表单验证。

表单提交

在 submitForm 方法中，你可以处理表单提交的逻辑，比如发送数据到服务器。

扩展阅读

更多关于 Vue.js 表单处理的资料，可以参考以下链接：

希望这个示例能帮助你更好地理解 Vue.js 表单处理。

图片示例

Vue表单示例