--- tags: Vue 實戰班 --- # v-model 說明：用於表單的資料與元件產生雙向綁定 注意：`v-model` 會忽略所有表單元素的 `value`、`checked`、`selected` 特性的初始值而總是將 Vue 實例的數據作為數據來源。需透過 JavaScript 在元件的 `data` 選項中宣告初始值。 範例重點： - 將 v-model 與 data 中的 `message` 綁定 - 此為雙向綁定，當 v-model 中的 message 值改變時，畫面上的 `{{ message }}` 也會一起更動 <iframe height="300" style="width: 100%;" scrolling="no" title="v-model-1" src="https://codepen.io/Wcc723/embed/dyBvmbY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Wcc723/pen/dyBvmbY"> v-model-1</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## v-model 修飾符： 此修飾符是搭配 v-model 使用，與 v-on 的觸發器略有不同，用來延遲觸發、改變型別、修飾字串等等 ### lazy `lazy`：避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步） 範例重點： - v-model 後方加上 `.lazy` 修飾符 - 當 input 編輯時，無法直接修改畫面上的值，需要離開 input 時才會觸發 <iframe height="300" style="width: 100%;" scrolling="no" title="Vue lazy" src="https://codepen.io/Wcc723/embed/vYqxRBK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Wcc723/pen/vYqxRBK"> Vue lazy</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### number `number`：限制只有數值型別的資料才能寫入，以下範例中的 number 資料會是以 `number` 型別傳入，無法透過該 input 套用其它資料型別。 範例重點： - 無論 input type 為何，input 預設所傳入的型別為字串 - 可以使用 .number 的修飾符，確保用戶所輸入的為純數值 <iframe height="300" style="width: 100%;" scrolling="no" title="v-model-3" src="https://codepen.io/Wcc723/embed/RwzpMbG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Wcc723/pen/RwzpMbG"> v-model-3</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### trim 3. `trim`：修飾掉首尾的空白 範例重點： - 用戶在輸入文字時，可能會在結尾補上空白，使用 `.trim` 修飾符則會移除結尾的空白字元 <iframe height="300" style="width: 100%;" scrolling="no" title="v-model-4" src="https://codepen.io/Wcc723/embed/OJepvLg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Wcc723/pen/OJepvLg"> v-model-4</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>