vue基础扩展5--重置表单成默认值

最新推荐文章于 2023-09-15 17:34:53 发布

野生技术协会

最新推荐文章于 2023-09-15 17:34:53 发布

阅读量1.5k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/shuixiou1/article/details/112689648

版权

本文介绍在Vue.js中如何将表单数据重置为初始默认值，探讨了 Vue 数据绑定原理和如何利用 Vue 的生命周期钩子实现表单重置的方法。

摘要由CSDN通过智能技术生成

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>vue基础扩展5--重置表单成默认值</title>
</head>
<body>
    <!---
      概述：vue 的data数据，会在vue创建后，绑定到options属性下，因此还原表单默认值可以使用
      this.query = this.$options.data().query; 其中query为data下的表单数据等。
    -->
    <div id="app">
      <form ref="formDom">
        <div class="input_group">
          <label for="username">用户名</label>
          <input type="text" name="username" v-model="query.username">
        </div>
        <div class="input_group">
          <label for="password">密码</label>
          <input type="password" name="password" v-model="query.password">
        </div>
        <div class="input_group"