透過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基礎篇--[串列與元組]


之前提到過Python的資料型態包括:數值、邏輯、字串、串列、元組、字典與集合等等。其中串列、元組、字典與集合是Python的複合式資料型態。這一篇我們要來談談其中的串列與元組型態。

List串列資料型態


串列又稱回清單或列表,與其他語言中的陣列(Array)相同。串列的角色是用來儲存大量有序資料的記憶空間。每個串列擁有一個名稱作為識別標誌,串列中的每個資料稱為「元素」。最主要的特色是,儲存在同一個串列中的元素,都是以數字來當作是索引,作為操作的依據。


在使用串列的時候,只要在儲存的資料兩側加上中括號([])就可以了。
例如:

my_list = [2,4,6,8,10]
如果用type()檢查my_list的型態,可以得到它是一個list串列。




串列的索引是從0開始,第一個索引值為0,第二個索引值為1,以此類推。



0
1
2
3
4
Int
Int
Int
Int
Int
2
4
6
8
10
因此,
my_list[0] = 2
my_list[1] = 4
my_list[2] = 6
my_list[3] = 8
my_list[4] = 10




索引值可以是負數,例如「-1」表示最後一個元素,「-2」表示倒數第二個元素。
但是如果索引值超出串列的資料範圍,會有錯誤(IndexError: list index out of range)出現。

my_list[5]



如果您想要把一句英文拆成字母所組成的串列,可以使用list()來達成。

例如:有個字串message,我們可以用list(message)

message ="Hello World"
list(message)




同一個串列可以有不同的資料型態,串列也可以有其他的串列,稱作「多維串列」。要取出串列中的個別串列值,只要再多一個中括號索引值即可。

例如:
p01 = ['apple', 5]
p02 = ['banana', 10]
p03 = ['orange', 3]
p04 = ['pineapple', 4]
p05 = ['mango', 7]
fruits = [p01, p02, p03, p04, p05]
fruits

會得到(串列中的串列)
[['apple', 5], ['banana', 10], ['orange', 3], ['pineapple', 4], ['mango', 7]] 的結果



又如果要取出多維串列中的第一個元素
fruits[0][0]



List串列的操作-Slicing

下面示範幾個操作串列的方式。我們先假設有下面一個串列:
days = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
首先,如果想要取出串列中的前三個項目的話,我們可以用下面方式:
days[0:3] 您可以得到下面的結果:
['星期一', '星期二', '星期三'] 如果想要取出串列中的前四個項目的話,我們可以用下面方式:
days[0:4]
您可以得到下面的結果:
['星期一', '星期二', '星期三', '星期四']
又如果您串列中的全部內容都要的話,可以用下面方式:
days[:]
您可以得到下面的結果:
['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
從第一個到倒數第二個:
days[0:-1]
您可以得到下面的結果:
['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
從第一個到倒數第三個:
days[:-2]
['星期一', '星期二', '星期三', '星期四', '星期五']

從第一個到倒數第三個到最後一個
days[-3:]
['星期五', '星期六', '星期日']



由於串列的應用非常廣泛,有許多進階的操作方式,下面為常用的方法:
串列運算式操作結果
Lst *nlst串列重複n
lst[n1:n2]把索引組n1n2的串列內容取出成為另一串列
lst[n1:n2:k]把索引組n1n2的串列內容取出成為另一串列,間隔為k
del lst[n1:n2]刪除索引值n1n2之間的元素
lst[n1:n2] = n把索引值n1n2之間的元素設定為n
lst[n1:n2:k] = n把索引值n1n2之間且間隔為k的元素設定為n
del lst[n1:n2:k]刪除索引值n1n2之間且間隔為k的元素
len(lst)回傳串列的個數
min(lst)回傳串列的最小值
max(lst)回傳串列的最大值
lst.index(n)回傳串列中第一次出現n的索引值
lst.count(n)計算出n 在串列中出現的次數
lst.append(x)x附加到串列的後面
lst.extend(x)x 中的所有元素附加到串列後面
lst.insert(n,x)x插入到索引值n的地方
lst.pop()彈出串列中最後一個元素,可加參數指定特定索引
lst.remove(x)從串列中移除第一個出現的x
lst.reverse()反轉串列的順序
lst.sort()將串列的元素內容加以排序

Tuples 元組


元組Tuples的使用方式與list很像。許多用於List的操作方式及方法都可以應用在Tuple上。
但是,只要設定了Tuple變數之後,其內容就不可以修改。

Tuple變數使用()小括號紀錄。
語法為:

(元素 1,元素 2,元素 3,元素 4,元素 5,...)

留言

這個網誌中的熱門文章

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

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

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