Vue使用v-model和提交组件实现数据的双向绑定

每日一技#

前言#

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