vue中表单双向绑定，怎么高效清空？
在不使用vue框架的情况下，清空表单很容易，直接操作dom即可，但是使用了vue，将表单中的数据与vue实例中的data绑定，操作表单后清空表单似乎没那么好理解了。这里给大家提供了两个解决方案。
第一种，将所有的表单数据放到 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>第二种别忘了在组件卸载时将defaultform垃圾回收。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-01-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读