vue实现表单重置

    <div>
        用户名:<input type="text" v-model="formData.username" />
        密码:<input type="text" v-model="formData.password" />
        <hr/> 
        <button @click="recover">恢复</button>
    </div>

export default {
    data() {
        return {
            formData: {
                username: '',
                password: ''
            },
            origanalData:{},
            compon:{}
        }
    }, 
    created(){
        // 模拟异步请求
        setTimeout(()=>{ 
            this.formData = {
                username: 'Green',
                password: 'admin123'
            }  
            //将对象转成字符串再转成对象这样对于origanalData就没有引用关系了
            this.origanalData = JSON.parse(JSON.stringify(this.formData));//仅使用于对指定表单data数据接收（第一种）
            this.compon=JSON.parse(JSON.stringify(this.$data))//适用于对单个组件中所有值进行初始化 （第二种）
        },2000)
    }, 
    methods:{ 
        //重置表单
        recover(){ 
            this.formData=this.origanalData;//第一种
            this.formData=this.compon;//第二种
        },
    } 
}