Vue學習#10 Vue指令集 - 寫入資料

# Vue學習#10 Vue指令集 - 寫入資料 ###### tags: `Vue 直播班 - 2022 春季班` `Vue` ## v-model 用於將表單的資料與元件進行雙向綁定的 Vue 指令 ```=Vue // v-model="要綁定Vue資料" <input type="text" v-model="message"> ``` ### 什麼是雙向綁定?! Vue 元件的資料與使用者畫面的 HTML 標籤進行雙向綁定，使用者可以透過 HTML 的標籤直接修改 Vue 元件的資料，當 Vue 資料有變時，也可以直接立即的顯示在 HTML 的標籤上面 [codepen雙向綁定範例](https://codepen.io/binlandz123/pen/podEYGO) ## v-model 修飾符 v-model 可以利用修飾符來做出各種效果 ### lazy **效果:** 避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步） **重點:** 1. `v-model.lazy` 在 model 後面加上 .lazy 2. 當 input 編輯時，無法直接修改畫面上的值，需要離開 input 時才會觸發 ### number **效果:** 限制只有數值型別的資料才能寫入，確保 input 的輸入欄只能將 number 型別值寫入 **重點:** 1. `v-model.number` 在 model 後面加上 .number 2. 可以使用 .number 的修飾符，確保用戶所輸入的為純數值 ### trim **效果:** 修飾掉輸入欄位首尾的空白 **重點:** 1. `v-model.trim` 在 model 後面加上 .trim 2. 用戶在輸入文字時，可能會在結尾補上空白，使用 .trim 修飾符則會移除結尾的空白字元 ## v-model表單運用 (checkbox 、 radio 、 select) [v-model 表單運用](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fjum_IOrASCWevidlnIAsOg) ## 萬一如果不想執行雙向綁定那就使用 ` v-once` 在標籤內使用 `v-once` 在其他處使用 `v-model` 修改資料時，該標籤不會受到影響