---
# System prepended metadata

title: Vue學習#10 Vue指令集 - 寫入資料
tags: [Vue, Vue 直播班 - 2022 春季班]

---

# 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  的標籤上面
<font size='6'>[codepen雙向綁定範例](https://codepen.io/binlandz123/pen/podEYGO)</font>

## v-model 修飾符
v-model 可以利用修飾符來做出各種效果

### lazy 

<font color=#B1187C >**效果:**</font> 避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步）
<font color=#B1187C >**重點:**</font>
1. `v-model.lazy` 在 model 後面加上 .lazy
2. 當 input 編輯時，無法直接修改畫面上的值，需要離開 input 時才會觸發

### number

<font color=#B1187C>**效果:**</font> 限制只有數值型別的資料才能寫入，確保 input 的輸入欄只能將 number 型別值寫入
<font color=#B1187C >**重點:**</font>
1. `v-model.number` 在 model 後面加上 .number
2. 可以使用 .number 的修飾符，確保用戶所輸入的為純數值

### trim

<font color=#B1187C>**效果:**</font> 修飾掉輸入欄位首尾的空白
<font color=#B1187C >**重點:**</font>
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` 修改資料時，該標籤不會受到影響

