--- title: vue做一個註冊系統 tags: vue --- 做一個動態更新的限制字數提醒 === 1. 原始的JS寫法: 抓取#acc的內容 輸入時 去判斷val的內容是否小於4個字 是的話html呈現最少4個字的紅色提醒 否則就不出現提醒 ![](https://i.imgur.com/uylt2dE.png) 2. vue的作法 * 先把範本的內容清空 ![](https://i.imgur.com/69BGPNq.png) * 把呈現的內容放在template的標籤內 * 上方import加上reactive 使其可以接受陣列跟物件 ![](https://i.imgur.com/9KbhK63.png) * const一個變數 預設為false 使其輸入框內容須符合條件（Ture）才可送出 ![](https://i.imgur.com/MrZZKav.png) * 下方button的標籤內新增 ![](https://i.imgur.com/XQ2omge.png) * 加上reactive以後const陣列內容 ![](https://i.imgur.com/dI7CRWA.png) * 下方在const一個error的陣列 ![](https://i.imgur.com/2wRy9Yh.png) * 由於已經有設定好了 所以input不用再有name和id 而是需要給他一個v-model 如下 ![](https://i.imgur.com/J7BLBYt.png) * 每個input下方給他一個div裡面放error的錯誤訊息 ![](https://i.imgur.com/cFj4ql8.png) * 在上方import加上watch屬性 使其可以動態監控它的動態 ![](https://i.imgur.com/GFp60ZR.png) * 加入以後需要加入一個watch的function ![](https://i.imgur.com/5xDnuTp.png)