Vue.js 入門(處理用戶輸入——按鈕 / 輸入框)

其實兩天前就學這個了,但這兩天有點拖沓,爲了教同學還先學了個跑馬龍(蠻好玩的,其實就是封裝計時器,晚點再寫一篇)

.

.

個人理解: 用戶輸入分爲按鈕(點擊)和輸入框(鍵盤)兩種方式。你這麼想,點擊也是輸入的一種,通過按鈕實現;鍵盤輸入也是輸入的一種,通過對話框實現。總之都是有關獲取用戶輸入並加工的等等相關部分

這是目前我能瞭解的部分,當然肯定不止這兩種,不過這些都是後話,那我們現在來說一說這兩種方式的運用

.

.

按鈕輸入:

在這裏插入圖片描述
在這裏插入圖片描述
點擊按鈕後(如下)
在這裏插入圖片描述
這個是怎麼實現的呢?
具體還得談談代碼中25行的三個函數:
(PS:解釋的來源 https://blog.csdn.net/weixin_37404604/article/details/80046771)

1、splite(’ ‘)可以將字符串按某個字符或者其他分割。返回數組。
2、reverse()該方法會改變原來的數組,而不會創建新的數組。此函數可以將數組倒序排列。
3、join()方法用於把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。指定分隔方法join(’ ');

即先把目的字符串分割爲數組,再倒序排列,最後用這個新數組重新生成字符串(easy~)

可能有些人理解的難點在:爲什麼點擊也算是輸入
想不明白就不想,會用就行

.

.

輸入框輸入:

在這裏插入圖片描述
在這裏插入圖片描述
通過 v-modle 把message和對話框內容連接起來
此時對話框內如何變化,上方內容就會如何變化,無論增怎樣變化
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章