Vue3 表单功能实现：双向绑定、数据添加与展示 - 示例教程

要给表单实现增加功能，需要使用Vue3的组件和指令。以下是一个简单的示例：\n\n首先，在组件中定义一个data属性，用于保存表单的数据。例如：\n\njavascript\n<template>\n <div>\n <form>\n <label for="name">Name:</label>\n <input type="text" id="name" v-model="name">\n \n <label for="email">Email:</label>\n <input type="email" id="email" v-model="email">\n \n <button @click="addUser">Add</button>\n </form>\n \n <ul>\n <li v-for="(user, index) in users" :key="index">\n {{ user.name }} - {{ user.email }}\n </li>\n </ul>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n name: '',\n email: '',\n users: []\n }\n },\n methods: {\n addUser() {\n this.users.push({\n name: this.name,\n email: this.email\n });\n \n this.name = '';\n this.email = '';\n }\n }\n}\n</script>\n\n\n在上述示例中，我们使用了v-model指令来实现双向绑定，将输入的值绑定到data属性上。当点击"Add"按钮时，调用addUser方法，将输入的数据添加到users数组中，并清空输入框的值。然后，使用v-for指令遍历users数组，将每个用户的姓名和电子邮件显示在列表中。\n\n这样，当用户输入数据并点击"Add"按钮时，就可以将数据添加到表单中，并在列表中显示出来。