透過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 基礎篇 -- [變數與資料型態]

什麼是變數?

首先,想像一下家裡的收納箱。你把一個寫著「一號箱」的標籤貼在這個收納箱上面。並且把一本書丟進這個收納箱內,然後把箱子封起來。此後,每當你尋找「一號箱」的時候,你就會找到那本書。再來,如果你把箱子打開拿出書本,換成一個馬克杯,然後一樣把箱子封起來。從此之後,每當你尋找「一號箱」的時候,你就會找到那個馬克杯。「變數」就像家裡的收納箱一樣,當程式設計者使用一個變數的時候,應用程式就會配置一塊記憶體給這個變數使用。並且以變數名稱做為辨識此記憶體區塊的標誌。


任何程式都會使用變數,變數通常用來儲存暫時的資料。
程式有各式各樣的資料型態,如果將各種資料依照不同的型態加以分類的話,不同的資料型態給予不同的記憶體配置,可以提高運作的效率。

如何使用變數?

詢問要如何使用變數的你,應該先問看看為什麼要使用變數。
使用變數,是因為透過這樣的方式,我們可以將重要的資料存在變數中以供給日後使用。
並且可以讓程式碼看起來簡潔有組織,有變動需要時也比較好變更。你可以透過下面的方式使用變數:
name = value
其中,name 是「變數名稱」 = value是「變數值」。

「=」符號不是等於

上面的「=」符號在程式裡是『指定』的意思,也就是把右邊的值指定給左邊的變數。對於初學者來說,這個地方非常容易搞錯,要特別注意。這與我們以前學校學的數學運算符號不一樣,我們以前所認知的等號,在程式裡面要寫成「==」或「===」,兩個或三個連續等號。

例如:X = 5 表示,建立一個以X為名稱的變數,並且指定5為此變數的值。也就是說,當我們一看到「=」符號時,就要先去計算右邊的式子,然後把結果放在左邊的變數裡面。

變數在命名時必須遵守一定的命名規則,所以當你在建立變數的時候,請記要使用英數大寫、小寫以及底線等符號。

我們來猜猜看下面程式碼執行的結果為何?

a = 1
a = 3
a = 5
print(a + a + a)
由於Python是由上而下執行程式碼的緣故,變數a會被後面行數的程式碼改變其變數值。直到第三行(a =5 )時停止改變,所以第四行列印出來的值就是 5 + 5 + 5 的結果。也就是15了。

變數的型態是什麼?

使用變數的時候,不用特別指定資料型態,因為Python 會根據「變數值」設定資料型態。如果你想知道該「變數值」被設定為哪種資料型態的話,可以透過 type() 來查詢變數目前的資料型態。
type()
例如:上面 X=5 的變數X是哪個形態的話,可以用 type(x)來得知。


基本資料型態

以下簡單介紹Python變數的資料型態。

數值型別

簡單說,1、2、3等數字就是數值型別。我們可以對數值型別的資料間進行加減乘除等運算。Python 的數值資料型態有整數(int)與浮點(float),浮點是指帶有小數的數值。
例如:整數為 num = 5、浮點為 num = 2.5

邏輯(布林)型別

Python 的布林資料型態只有兩個值:True 與 False。當結果為真的時候,以True來表示。反之,則以False來表示,請注意布林資料型態的True 與 False其第一個字母為大寫。

例如:isNavi = True

字串型別

字串就是將整串資料當作文字處理的意思。Python 的字串資料型態為(str)。只要在一段文字內容前後以一對雙引號、或一對單引號包起來的部分,變能夠被當作字串形態的資料來處理。

例如: name = “John”

另外,如果連續輸入三個單引號或連續輸入三個雙引號,就可以在中間放入多行的字串。

例如: 
aboutMe = """
我的名字是John
我喜歡唱歌跳舞
我喜歡python
"""
執行結果:


除此之外還有串列型別、字典型別和集合型別,就留待他文介紹。

資料型態的轉換

為變數設定正確的資料型態很重要。前面提到,由於Python 會根據「變數值」設定資料型態,一般在使用變數的時候,不用特別指定資料型態。但是,Python 判斷的結果有可能不是我們所希望的資料型態(例如:我們希望10的資料型態是str字串而Python卻認為是int數值),這時如果沒有正確設定資料型態的話,就有可能發生預料不到的計算錯誤。因此,為了確保資料型態的確是我們所希望的型態,就必須進行資料的轉換。

我們可以透過 int() 、float() 或 str() 進行強制資料型態的轉換。
  • int() :強制轉換為整數資料型態。
  • float():強制轉換為浮點資料型態。
  • str() :強制轉換為字串資料型態。
舉例說明:我們舉 str()強制轉換為字串資料型態為例說明

在列印字串時,如果將字串與數值組合在一起,會產生錯誤。
age = 20
print("小花的年齡為" + age +"歲")
執行結果:


這時候就要將數值資料轉換成字串後再組合,就可以解決問題。
age = 20
print("小花的年齡為" + str(age) +"歲")
執行結果:







留言

這個網誌中的熱門文章

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

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

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