透過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基礎篇--[變數的命名規則]

如果變數命名的好,可以讓這個程式容易被他人暸解,如此不但方便多人協同合作開發程式,也有利於日後程式碼的維護。因此,在命名的時候最好是賦予變數有意義的名稱。舉例來說,如果要記錄年齡,可以使用age作為變數(age = 20),而不要使用a( a = 20)。age看起來比a更有意義,不是嗎? 



除了要有意義之外,變數在命名的時候,還需要遵守一定的規則。如果沒有遵守的話,程式在執行時,可能會產生錯誤。 

下面是一般的命名規則: 
  • 英文第一:變數名稱的第一個字母必須是大小寫英文字母 。 
  • 限英數底線:變數只能由大小寫字母、數字、底線( _ ) 組成變數名稱。 
  • 大小各異:英文字母大小寫不同,視為不同變數名稱 
  • 保留禁止:變數名稱不能與Python保留字相同。 
所以,如果要命名為output時,可以使用outputNumber或者是output_number來命名。 

哪些字是Python保留字呢? 下面列出Python保留字
acos
continue
exec
if
log10
return
And
cos
exp
import
not
sin
array
data
Fabs
in
open
Sqrt
Asin
def
Float
Input
or
tan
assert
del
finally
int
pass
try
Atan
e
floor
is
pi
type
Break
elif
for
Lambda
print
while
class
else
from
log
raise
write
close
Except
global
Log
range
Zeros

這些保留字是原本Python中就會被使用到的,例如print、def、if、else、for 等等,不能被拿來作為變數的名稱,在命名時一定要注意,不要要踩到紅線了。

以下是不好的命名

print = 5 
int = 10 
以下是比較好點命名

printing = 5 
print_variable = 5
int_var = 10

此外,變數的命名最長可以多長呢?Python的官網上有一份完整的編寫規範可以參考。文件PEP 8 -- Style Guide for Python Code上面提到,命名最好長度不要超過79個字母。
如果大家都遵守同一種規範的話,對於日後的維護與協作有很大的幫助。

https://www.python.org/dev/peps/pep-0008/

留言

這個網誌中的熱門文章

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

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

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