vue中怎么實現表單雙向綁定

這期內容當中小編將會給大家帶來有關vue中怎么實現表單雙向綁定，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

第一種，將所有的表單數據放到 form對象中，提交表單后遍歷對象，將對象屬性置空，代碼如下：

<template>
  <div id="app">
    <form action="" @submit.prevent='updata'>
      <input type="text" v-model="form.username"><br>
      <input type="text" v-model="form.pass"><br>
      <input type="text" v-model="form.tel"><br>
      <input type="submit" value="提交">
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  name: "app",
  created() {},
  methods: {
    updata() {
      alert(this.form.username);
      for (var i in this.form) {
          this.form[i] = "";
        }
    }
  }
};
</script>
<style>
</style>

上面的是一般情況，若是初始值比較復雜的話，采用第二種方法，在created生命周期中，保存自定義的值，需要對保存的值進行序列化，操作完表單后，給form重新賦值。代碼如下：

<template>
  <div id="app">
    <form action="" @submit.prevent='updata'>
      <input type="text" v-model="form.username"><br>
      <input type="text" v-model="form.pass"><br>
      <input type="text" v-model="form.tel"><br>
      <input type="submit" value="提交">
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "匿名用戶",
        pass: "123456",
        tel: "123123123321"
      }
    };
  },
  name: "app",
  created() {
    this.defaultform = JSON.parse(JSON.stringify(this.form));
    // this.defaultform = Object.assign({},this.form);
  },
  destroyed() {
    this.defaultform = null;
  },
  methods: {
    updata() {
      console.log(this.form);
      this.form = Object.assign({}, this.defaultform);
    }
  }
};
</script>
<style>

</style>

上述就是小編為大家分享的vue中怎么實現表單雙向綁定了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。