每日一技

前言

前段时间有一个朋友在使用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>

代码解析

sequenceDiagram
Vue实例 ->> HTML表单: 数据绑定
HTML表单 ->> Vue实例: 表单提交
Vue实例 ->> HTML表格: 数据绑定
HTML表格 ->> User: 展示用户信息

v-model 是 Vue.js 中的一个指令，它用于实现双向数据绑定。

这段代码中，我们使用了 v-model 指令将表单中的输入框绑定到了 Vue 实例中的数据。比如，在表单中的用户名输入框中输入内容时，Vue 实例中的 username 属性的值也会被更新；反之，如果在 Vue 实例中修改了 username 属性的值，表单中的用户名输入框中的内容也会被更新。 这样，我们就可以在 Vue 实例中使用一个统一的数据模型来管理表单中的数据，并实现对表单数据的双向绑定。

另外，在这段代码中，我们定义了一个 submitted 状态，它的初始值为 false。当表单被提交后，我们会将 submitted 状态设置为 true。

这个状态的作用是用来控制表单提交后的数据展示表单的显示/隐藏状态。具体来说，我们使用了 Vue 的指令 v-if 来根据 submitted 状态的值来决定是否将数据展示表单显示出来。

当 submitted 状态为 true 时，数据展示表单会被显示出来；反之，当 submitted 状态为 false

上文只是一个代码片段，如果想学习开箱即用的代码，可以查看文末的“码上掘金”

最后

本文所涉及的内容基于我的个人实践，很多东西基于我个人的理解，所以有望大家多多指教。
如果你发现了本文的错误之处，欢迎你在评论区留言，我会及时的进行修改。如果你有其他的想法，也欢迎在评论区留言，我会在看到评论的第一时间回复。
码字不易，如果你觉得本文对你有帮助，麻烦点个大大的赞，你的支持是我更新的最大动力！