每日一技
前言
前段时间有一个朋友在使用vue的时候遇到了一点问题
当时在进行期末答辩所以没找到时间整理代码，今天在整理电脑文件的时候刚好看到了发给朋友的代码，整理下思路和代码顺手发个文章，希望能帮助到更多的人
需求
实现在表单输入数据，点击按钮提交后，在表格中显示数据。
需求分析
将表单的数据与表格数据进行绑定，点击提交按钮后在表格中显示数据
可以实现 submitForm 方法处理表单提交的逻辑。
可以使用v-model实现数据的双向绑定
以下是代码实现，具体可见下方的代码解析
代码实现
<!-- 引入 Vue 的 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 定义表单的 HTML 结构 --> <div id="app"> <form> <label>用户名：</label> <input type="text" v-model="username" /><br> <label>密码：</label> <input type="password" v-model="password" /><br> <button type="submit" @click.prevent="submitForm">注册</button> </form> <!-- 定义提交后的数据展示表单 --> <div v-if="submitted"> <label>用户名：</label> <span>{{ username }}</span><br> <label>密码：</label> <span>{{ password }}</span><br> </div> </div> <!-- 定义 Vue 实例，并实现数据的双向绑定 --> <script> new Vue({ el: '#app', data: { username: '', password: '', submitted: false }, methods: { submitForm() { // 在表单提交时，更新 submitted 状态，并在下方的表单中显示用户名和密码 this.submitted = true; } } }); </script> 复制代码
代码解析
v-model 是 Vue.js 中的一个指令，它用于实现双向数据绑定。
这段代码中，我们使用了 v-model 指令将表单中的输入框绑定到了 Vue 实例中的数据。比如，在表单中的用户名输入框中输入内容时，Vue 实例中的 username 属性的值也会被更新；反之，如果在 Vue 实例中修改了 username 属性的值，表单中的用户名输入框中的内容也会被更新。 这样，我们就可以在 Vue 实例中使用一个统一的数据模型来管理表单中的数据，并实现对表单数据的双向绑定。
另外，在这段代码中，我们定义了一个 submitted 状态，它的初始值为 false。当表单被提交后，我们会将 submitted 状态设置为 true。
这个状态的作用是用来控制表单提交后的数据展示表单的显示/隐藏状态。具体来说，我们使用了 Vue 的指令 v-if 来根据 submitted 状态的值来决定是否将数据展示表单显示出来。
当 submitted 状态为 true 时，数据展示表单会被显示出来；反之，当 submitted 状态为 false
上文只是一个代码片段，如果想学习开箱即用的代码，可以查看文末的“码上掘金”
最后
本文所涉及的内容基于我的个人实践，很多东西基于我个人的理解，所以有望大家多多指教。
如果你发现了本文的错误之处，欢迎你在评论区留言，我会及时的进行修改。如果你有其他的想法，也欢迎在评论区留言，我会在看到评论的第一时间回复。
码字不易，如果你觉得本文对你有帮助，麻烦点个大大的赞，你的支持是我更新的最大动力！
