vue清空表单的几个方法
    1、 使用reset()函数重置表单
    使用reset()函数可以重置表单中的所有元素,只需在表单元素中添加一个ref属性,并在相应的methods里面添加reset方法:
    <form ref='form'>
    <input type='text' name='name' v-model='name'>
    <input type='password' name='password' v-model='password'>
    <input type='submit' value='提交'>
    </form>
    methods:{
    reset(){
    this.$set()
    }
    }
    2、使用Vue响应式表单
    你可以使用Vue响应式表单技术来给表单中的每一个元素都定义一个相应的值,当表单提交时,你可以使用methods中的reset方法来清空表单中的值,代码如下:
    <form>
    <input type='text' name='name' v-model='name'>
    <input type='password' name='password' v-model='password'>
    <input type='submit' value='提交'>
    </form>
    data(){
    return{
    na'',
    password:''
    }
    }
    methods:{
    reset(){
    this.name=''  //清空input表单的值
    this.password=''
    }
    }
    3、使用clearFormData()函数
    你也可以使用clearFormData()函数来清空表单中的所有数据,首先在js文件中编写clearFormData()函数如下:
queryselectorall用法
    //清空表单数据
    function clearFormData(){
    let formList=document.querySelectorAll('input')
    for(let i=0;i<formList.length;i++){
    formList[i].value=''
    }
    }
    然后在methods中添加reset方法:
    methods:{
    reset(){
    clearFormData()  //调用clearFormData()函数清空表单数据
    }
    }。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。