透過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基礎篇--迴圈 For Loops and While Loops

Python的主要迴圈指令有二,分別是For迴圈與While迴圈。兩者的差別在於while迴圈不會預設重複的次數,也就是說如果使用while迴圈時,可以無限次的重複。如果預先知道需要重複多少次的話,使用For迴圈會比較恰當。

For迴圈(For loops)

如果預先知道需要重複多少次的話,採用for迴圈是比較洽當的。他的語法如下:

for 變數 in 串列:
     
程式區塊

例如下面的例子。其中i是變數,mylist是串列 ,而程式區塊的內容則是 print(i)。

mylist = [1,2,3,4,5]

for i in mylist:

print(i) 


上面的程式碼執行後,電腦會陸續的將mylist串列的內容印出來,就像下面一樣。


當一切元素都處理完畢後,就會結束for迴圈。
另外,也可以使用range()來設定迴圈的執行次數,其語法如下:

for 變數名稱 in range(重複次數):

  重複執行的程式

巢狀迴圈

for迴圈也可以放在另外一個for迴圈裡面,這樣就成為所謂的巢狀迴圈。巢狀迴圈的執行次數是各層迴圈的乗績。

利用這個特性,我們可以透過巢狀迴圈製作九九乘法表。


for x in range(1,10):
    for y in range(1,10):
        product = x * y
        print("%d x %d =%d" %(x,y,product), end="")
    print()

While 迴圈(While Loops)


如果條件符合的話,程式區塊就會被執行。反之,若條件不符合時,就結束迴圈繼續執行迴圈後面的程式碼。也就是說while迴圈會在條件為True的狀況下,重複執行內部的程式區塊內容。while迴圈通常沒有固定執行的次數,語法如下:

while 條件:


    程式區塊


下面的例子。條件是 n <3 ,程式區塊的內容是:print("name")
n = 0
while n <3
    
print("name")
需要特別注意的是,迴圈必須設定中止條件,否則會陷入無窮迴圈之中。無窮迴圈會造成電腦極大的負擔,在寫程式的時候必須注意。
如上面的例子,由於迴圈沒有設定中止條件,執行後會發生無窮迴圈的狀況。必須讓n值每執行一次就遞增一次。 n=n+1
n = 0
while n <3
    print("name")
    n = n + 1
日後如果不慎進入無窮迴圈,請按Ctrl + C中斷程式的執行。

Break與Continue

中途要結束迴圈執行時,可以使用break強制離開迴圈。break的使用方法可以參考下面的程式碼:
energy = 2 
while True:
    print("拳")
    print("踢")
    print("殺")
    energy = energy -1    
    if (energy == 0):
        break

當執行兩次列印之後,energy = 0的條件成立時,就會執行break。

continue命令的作用,在於讓電腦在執行程式時跳過或忽略該輪迴圈後續的程式碼,繼續執行下一輪的迴圈。此時迴圈中途暫停,不往下執行而跳回到開始處繼續執行。



留言

這個網誌中的熱門文章

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

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

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