前端学习(2685):重读vue电商网站6之如何重置表单
生活随笔
收集整理的這篇文章主要介紹了
前端学习(2685):重读vue电商网站6之如何重置表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
element-ui?對表單提供了如下方法?resetFields,我們只需要獲取表單對象數據即可重置我們的表單。
獲取表單對象方式如下:
直接在表單處添加?ref屬性,如下?loginFormRef,此引用即為我們表單實例。
然后,在我們重置按鈕處,通過?@click?給按鈕綁定一個事件
下一步,添加方法,我們可以打印一下?this
不難發現,此時的?this?指向的就是我們當前登錄組件?login.vue的實例對象。
觀察上圖,我們看到有一個?$refs?屬性,這個就是我們的表單實例。
?
:
此時,我們的方法就可以改寫成如下方式
最后,我們點擊重置按鈕后,會發現輸入框并不是完全清空了,原因是data數據里面一開始我們設置了默認值,因此resetFields()函數就是清空為默認值。
總結
以上是生活随笔為你收集整理的前端学习(2685):重读vue电商网站6之如何重置表单的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 偏微分方程数值解的matlab 实现,偏
- 下一篇: 三、实战小例程 基于STM32F103C