透過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的條件實現電影分級流程


電影分級流程




電影的分級制度大家應該都不算陌生吧。就目前台灣的現行分級制度來說可以分為五級。分為
  • 普遍級:一般觀眾皆可觀賞
  • 保護級:未滿6歲之兒童不宜觀賞,6歲以上未滿12歲之兒童需父母、師長或成年親友陪伴觀賞。
  • 輔12級:未滿12歲之兒童不宜觀賞。
  • 輔15級:未滿15歲之人不宜觀賞。
  • 限制級:未滿18歲之人不宜觀賞。
五種。

我們現在透過Python的控制流程來逐步思考這個問題吧。

首先,先處理限制級的問題。限制級的條件是未滿18歲之人不得觀賞限制級電影。
如果把它轉換成邏輯陳述,就可以變成『假如年齡小於18歲,不得觀賞『限制級』電影
。但可以觀賞其他級數電影--『普遍級』、『保護級』、『輔12級』與『輔15級』電影』



程式可以寫成如下的式子:
假設我們輸入15歲(age = 15)的話,執行結果如下:

假設我們輸入30歲(age = 30)的話,執行結果如下:

什麼訊息都沒有。

接下來我們來優化一下程式碼,在條件不符合的時候給他一些提示訊息。運用ELSE就可以表達「條件不符合時的狀況」。


程式可以改寫成如下的式子:
我們再次輸入30歲(age = 30),執行結果如下:


出現「可以觀賞任何電影」的訊息了。

接下來,我們輸入15歲輔導級的條件。

接者繼續輸入12歲輔導級與保護級的條件。
輸入完畢後我們測試一下,先輸入5歲(age = 5),執行結果如下:


怎麼與我們期待的結果不同?我們希望它落入age < 6 區段的陳述子句,卻落到 age < 18區段了。

主要的原因前面有說過,ELIF陳述句的順序非常重要,由於該陳述句中,一旦找到符合條件的子句,其他剩下的子句都會跳過。目前的狀況就是它找到 age < 18符合條件之後,就跳過後面所有的陳述子句了。因此,我們必須調整上面程式的順序:
調整後再輸入5歲(age = 5)執行一次,結果:

這樣子就正確了。如此,整個分級制度的邏輯就完成了。

留言

這個網誌中的熱門文章

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

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