Vue 的雙向綁定使用的指令是 v-model。
雙向綁定指的是對綁定的操作除了 view model 至 view 以外，還能夠把在 view 上更新的資料傳回 view model。
先前學習的綁定(v-bind、鬍子語法等)，皆是僅有從 view model 至 view 的單向綁定。
基本綁定
範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| data: {
inputMsg: 'hello input',
textareaMsg: '',
checkboxMsg: true,
radioMsg: '',
arrayCheckboxMsg: [],
selectMsg: '',
withVfor: 'summer',
options: [
{ value: 'spring', text: '春' },
{ value: 'summer', text: '夏' },
{ value: 'autumn', text: '秋' },
{ value: 'winter', text: '冬' }
]
}
|
https://codepen.io/ivy-lee/pen/QWbVrdp
在 input 標籤裡下 v-model，綁定 data，讓視圖上的 input 框內顯示 inputMsg 的值，並在更新 input 框資料時更改 inputMsg 的值。
1
2
| <input type="text" v-model="inputMsg">
<span>{{ inputMsg }}</span>
|
由於 inputMsg 預設為 hello input，初始渲染時輸入框內就會顯示 hello input。
Textarea
多行文本的雙向綁定，基本上同 input，但是使用情境為需要多行文本時。
1
2
| <textarea cols="30" rows="3" v-model="textareaMsg"></textarea>
<p style="white-space: pre-line;">{{ textareaMsg }}</p>
|
Checkbox
依據 checkbox 的勾選與否，視圖頁面上會呈現 true 或 false。
1
2
| <input type="checkbox" id="checkbox" v-model="checkboxMsg">
<label for="checkbox">{{ checkboxMsg }}</label>
|
由於 checkboxMsg 預設為 true，初始渲染時會是打勾的狀態。
Radio
在所有的 input 裡下 v-model，依據選擇的選項，視圖頁面上的 p 標籤裡會顯示該 input 的 value。
1
2
3
4
5
6
7
8
9
10
| <input type="radio" name="radio" id="witcher" value="witcher!" v-model="radioMsg">
<label for="witcher">Geralt</label>
<input type="radio" name="radio" id="bard" value="bard~" v-model="radioMsg">
<label for="bard">Jaskier</label>
<input type="radio" name="radio" id="sorcerer" value="" v-model="radioMsg">
<label for="sorcerer">Yennefer</label>
<p>{{ radioMsg }}</p>
|
由於 radioMsg 預設為 ‘’，初始顯示會為 value 為空的那個 input，也就是 Yennefer。
Multiple Checkbox
多選的 checkbox 作法一樣是在每個 input 裡下 v-model，不同的地方在於它所綁定的 data 必須是個陣列，只要選擇的 checkbox 是處於被勾選的狀態，那麼它的 value 就會被推到陣列內。
1
2
3
4
5
6
7
8
9
10
| <input type="checkbox" id="hiking" value="hiking" v-model="arrayCheckboxMsg">
<label for="hiking">hiking</label>
<input type="checkbox" id="swimming" value="swimming" v-model="arrayCheckboxMsg">
<label for="swimming">swimming</label>
<input type="checkbox" id="reading" value="reading" v-model="arrayCheckboxMsg">
<label for="reading">reading</label>
<input type="checkbox" id="gaming" value="gaming" v-model="arrayCheckboxMsg">
<label for="gaming">gaming</label>
<p>What do you like to do in your free time? {{ arrayCheckboxMsg }}</p>
|
Select
在 select 標籤裡下 v-model，就能依據 option 的 value 雙向綁定 selectMsg 內的資料。
1
2
3
4
5
6
7
| <select v-model="selectMsg">
<option value="" disabled> --- </option>
<option value="前端">frontend</option>
<option value="後端">backend</option>
<option value="設計師">ui/ux</option>
</select>
<span>{{ selectMsg }}</span>
|
Select with v-for
有時 select 會與 v-for 混用，這時的 v-model 用法和沒有使用 v-for 的沒有什麼太大的差別，一樣是綁定 option 的 value。
1
2
3
4
| <select v-model="withVfor">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<span>{{ withVfor }}</span>
|
修飾符
.lazy
不即時更新，而是在 change 事件發生時，也就是說離開 input 框時才更新。
.number
把輸入的值自動轉型為 number。
.trim
去空白，首尾皆會過濾掉。
