使用v-model和提交组件，Vue可以實現數據的雙向綁定。

每日一技#

前言#

前段時間有一個朋友在使用 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