第一种  通过v-model=""的动态清空

<form @submit="formSubmit" >
    <view>
        <input type="text" value="" v-model="test" name="test" />
        <button form-type="submit">Submit</button>
    </view>
</form>
formSubmit(e) {
	console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
	this.test = '';
}

第二种  通过reset按钮来动态清除,而不是直接点击来实现, H5端的

<form @submit="formSubmit" @reset="formReset">
    <view>
        <button form-type="submit">Submit</button>
        <button form-type="reset" ref="resrtBtn" style="display:none;">Reset</button>
    </view>
</form>
formSubmit(e) {
	console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
	this.$refs.resrtBtn.$dispatch('Form', 'uni-form-reset', {
		type: 'reset'
	})
}

第三种  就是通过手动的reset按钮来清除

<form @submit="formSubmit" @reset="formReset">
    <view>
        <button form-type="submit">Submit</button>
        <button form-type="reset" ref="resrtBtn" >Reset</button>
    </view>
</form>
formReset(e) {
	console.log('form发生了reset事件)
	
}

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐