---
# System prepended metadata

title: vue做一個註冊系統
tags: [vue]

---

---
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)

    