透過Vue實現限制數入字數

我們都知道,平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter,Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是,當使用者在輸入的同時,提示使用者還有多少字可以輸入,當使用這輸入的字數達到限制時,及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢? 有兩的點需要注意: 如何計算使用者輸入了多少字? 當使用這輸入的字數達到限制時,該如何停止繼續輸入? 今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先,我們先準備好需要的HTML檔案。 <!DOCTYPE html> <html lang=“zh-TW”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <meta http-equiv=“X-UA-Compatible” content=“ie=edge” /> <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” /> <title>Start</title> </head> <body> <div id=“app” class=“container”> <div class=“row”> <div class=“col”> <textarea cols=“30”

Python基礎篇--[輸入與輸出]




Print 函式

Print函式的功能是將括號內的字串顯示在螢幕上。
例如:一個程式的起手式Hello World。
print(‘Hello World’)
上面的程式碼是指把Hello World印出來。這裏所謂「印出來」不是要印在紙上,而是指顯示在電腦螢幕中的意思。

執行結果如下:


請注意,print的括號裡面的引號( ‘ )並沒有被印出來,因為使用引號的用意是要標示出字串的起始與結尾,引號本身不是字串的一部分。

如果想要印出空行的話,可以透過呼叫print()來實現。在print的括號內保留空白即可。

Print函數可以一次印出多個項目。只要在項目與項目之間用逗號分開,就可以一次印出多個項目。例如:
print(‘John’, 100, ‘A’)
執行結果如下:

如果想要在項目與項目中間加入特殊的分隔符號來區隔的話,可以使用sep。

執行結果如下:


如果想要在列印完畢之後自動加入字元,可以使用end。

執行結果如下:


Input 函式

與print命令列相反,input函式的功能是透過鍵盤輸入讓使用者輸入文字命令。這是個使用相當頻繁的命令。語法是:
變數 = input([ 提示字串 ])
提示字串用來告訴使用者要如何輸入。當使用者輸入內容按下鍵盤上面的enter鍵之後,input命令會將使用者輸入的資料存入變數中。換句話說,當呼叫此函數之後,會取得使用者輸入的字串,並且把此字串指定給變數。

例如:
age = input(“請輸入您的年齡: ”)
print(age)
執行結果如下:
此外,要分辨是否為函式名稱,可以透過觀察名稱後面是否接著左右括號()來辨識。如果名稱後面跟著左右括號()的話,就是個函式:例如本篇所討論的print()與input()都屬於函式。

留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

Vue元件實作,將HTML網頁Vue元件化

Python基礎篇--[條件]如果發生這種狀況時,我該怎麼辦?