透過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的字典(Dictionary)資料類型,類似於一般的字典。是將所有資料一組組的配對成「索引標題」與「對應的資料」儲存起來。其中的「索引標題」就是這個資料的 Key(鍵),「對應的資料」也就是這個資料的 Value(值),Value 可以是數值也可以是字串。由於這樣子的結構,我們就可以使用Key(鍵),取得Value(值)。

字典的語法如下,將所有元素放在大括號{}裡面:

{'key1': value1, 'key2': value2, 'key3': value3, ....} 如果用在實際例子會是這樣:

student = {"first_name": "小花","last_name":"王", "age":18 }

字典的使用方式

我們繼續以上面的students為例:
student = {"first_name": "小花","last_name":"王", "age":18 }

.keys()

keys()可以列出所有索引值。例如:
student.keys()

.values()

.values()可以列出所有內容資料。例如:



注意:keys與values都是複數,都有s。不要忘了。

.pop()

如果我們想要移除字典裡面的一整組索引與內容資料(Key與Value)的話,可以用pop():
student.pop("last_name")
如此,last_name這一整組資料就被刪除了。字典裡面只剩下first_name與age了。

.items()

.items()可以取得字典中元素的組合。例如:
student.items() 可以取得student字典中所有的key與value元素的組合。

.copy()

.copy()可以複製字典。例如:
student2 = student.copy()

這樣就可以把student全部複製到student2裡面。

.get(key, value)

取得key(鍵)對應的value(值),如果字典裡面沒有對應的value(值)時,就傳回參數中的value(值)。例如:


當我要取得student字典裡面key為last_name的值,因為last_name的值存在,因此會傳回「王」這個值。如果我要尋找字典裡面key為name的值(student.get('name')),由於student字典裡面沒有name這個key,因此不會回傳結果。但是如果我在裡面加上sean這個參數(student.get('name','sean')),就會回傳參數中設定的'sean'這個值。

加入新資料

如果要加入新的一組索引與內容資料的話,我們可以像下面這樣子做:
student["class"] = "2"

如此就可以把class: 2這組資料加入student字典中。

改變原有資料

如果想要改變字典中現有的資料,可以對key(鍵)設定新的Value (值):
student["age"] = "25"
如此就可以從原來的18變成25了。


Key(鍵)必須是唯一,而Value(值)可以重複。如果索引標題 Key(鍵)重複的話,前面的 Key 會被後面的覆蓋,只有最後的 Key有效。



字典的排序是隨機的,與設定的順序未必相同,所以不可以像list一般以位置作為索引。

留言

這個網誌中的熱門文章

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

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

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