透過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基礎篇--[條件]如果發生這種狀況時,我該怎麼辦?

日常生活中隨處可見的選擇邏輯



一個夏日的中午,行經便利商店,看到冰櫃裡一瓶瓶冰涼的飲料,感覺喝下去會很解渴,於是你走了進去,打開冰櫃拿出一罐售價25圓的可樂。正要掏出皮包裡的悠遊卡購買時,發現悠遊卡內儲值的額度只剩5元。於是你檢查皮包中看看有沒有現金。結果發現有一張ㄧ百元,於是你拿出那張一百元給店員。像這樣子的情形你應該不陌生吧?這是日常生活常見的場景,可以說在我們人生中就是會不斷的面臨各種大大小小的選擇。


我們常常會說,如果碰到狀況A,就做AA這件事;如果碰到狀況B,就做BB這件事;如果既不是A也不是B的話,就去做CC這件事。如果我們用這樣子的邏輯來敘述上面的場景的話,就會變成:
  • 如果悠遊卡的儲值大於可樂的售價(25元),就用悠遊卡付款。
  • 如果悠遊卡的儲值小於可樂的售價(25元),尋找皮包是否有現金。
  • 如果皮包有現金,而且現金大於可樂的售價(25元),就用現金付款。
  • 如果皮包沒有現金或現金小於可樂的售價(25元),就不買可樂

if/else流程控制

我們知道Python 執行是從最頂端第一行開始,然後循序向下逐條執行。 但是,並不是所有程式都是由上而下循序的執行,如果程式中有流程控制的陳述句子時,可能會依據條件跳過某些程式碼,也可能跳過整個區塊的子句不執行。

簡單說,流程控制就是「程式按照當時狀況、分別執行不同處理動作的功能」。在表示方式上面,我們會使用if、else、elif等方式表示他們之間的關係。

IF陳述句

IF 用中文解釋就是指「如果」的意思。在流程圖中使用菱形來表示,表示程式要做出的實際決定。

如果條件為True時會執行子句,條件為False時子句會跳過不執行。

例如:「如果悠遊卡的儲值大於可樂的售價(25元),就用悠遊卡付款。」如果用Python表示就會像這樣:






程式碼
if 悠遊卡的儲值 >=25:
使用悠遊卡付款
所有流程控制陳述句都是以冒號結尾,並在後面跟著一個新的程式區塊,也就是陳述子句。以上述的例子來說,陳述句是:『悠遊卡的儲值 >=25』,陳述子句是『使用悠遊卡付款』
程式碼
if 陳述條件成立:
執行這行陳述子句程式

需要特別注意的是,上面的語法中,tab的地方可以採用按一次tab鍵的方式,或者是以空白鍵輸入4個連續的半形空格。建議使用後者比較好。這是Python特有的撰寫方式,也稱作「縮排」。「縮排」在Python裡面很重要,如果沒有正確的縮排,可能導致程式發生錯誤無法執行。

ELSE陳述句


IF語法可以加入ELSE表示當IF不成立(條件為False)的時候要做的事。例如:「如果悠遊卡的儲值小於可樂的售價25元,尋找皮包是否有現金。」可以翻譯成「如果條件『悠遊卡的儲值大於可樂的售價(25元)』這件事不成立的話,就尋找皮包內是否有現金。」

如果前面的IF成立了(條件為True),就不會執行後面ELSE 裡的陳述子句;反之如果IF不成立,IF 裡的陳述子句就會被跳過,只執行 ELSE的部分。

可以採用按一次tab鍵的方式,或者是以空白鍵輸入4個連續的半形空格。建議使用後者比較好。這是Python特有的撰寫方式,也稱作「縮排」。「縮排」在Python裡面很重要,如果沒有正確的縮排,可能導致程式發生錯誤無法執行。


ELIF陳述句

有時候我們需要由很多個可能的選擇中找一個符合的陳述子句來執行,這個時候可以使用多重IF陳述句來描寫。通常我們會使用ELIF放在IF或另一個ELIF的後面,意思是『否則如果』,提供了另一個條件判斷與選擇。

例如:「如果皮包有現金且大於25元,就用現金付款,如果皮包沒有現金或現金小於可樂的售價(25元),就不買可樂。」


要注意的是,ELIF陳述句的順序非常重要,由於該陳述句中,一旦找到符合條件的子句,其他剩下的子句都會跳過。也就是說只有一個子句會被執行。如果ELIF陳述句的順序排列錯誤的話,程式就會出現錯誤。因此,我們也可以在最後一個ELIF陳述句的後面加上ELSE陳述句,這樣子的話我們可以確保至少有一個子句會被執行。

巢狀IF/ELSE陳述句

所謂的巢狀結構就像是俄羅斯娃娃一樣,打開娃娃的頭裡面還有一個小娃娃,再打開小娃娃的頭,裡面還有更小的娃娃,就這樣一個又一個的下去。如果你沒看過這個東西,也可以想像家裡廚房的保鮮盒套組,你可以把小型的保鮮盒放在中型的保鮮盒裡面,然後再把中型的保鮮盒放進大型的保鮮盒裡面。

IF/ELSE敘述也一樣,在IF和ELSE裡面,也可以有IF和ELSE,我們稱作巢狀敘述。

留言

這個網誌中的熱門文章

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

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