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小时内删除。
发表评论