[Vue] 表單輸入綁定

v-model

可用在

• <input>

<input v-model="userName" placeholder="user name">

<p>User name is: {{userName}}</p>

• <textarea>

<textarea v-model="remark" placeholder="remark"></textarea>

<p style="white-space: pre-line">{{remark}}</p>

• <input type="checkbox"> 

<input type="checkbox" id="checkbox" v-model="checked">

<label for="checkbox">{{checked}}</label>

• group <input type="checkbox"> 

<input type="checkbox" id="memo1" value="memo1" v-model="checkedMemo">

<label for="memo1">Memo1</label>

<input type="checkbox" id="memo2" value="memo2" v-model="checkedMemo">

<label for="memo2">Memo2</label>

<input type="checkbox" id="memo3" value="memo3" v-model="checkedMemo">

<label for="memo3">Memo3</label>

<p>Checked Memo: {{checkedMemo}}</p>

• <input type="radio">

<input type="radio" id="first" value="first" v-model="picked">

<label for="first">first</label>

<input type="radio" id="second" value="second" v-model="picked">

<label for="second">second</label>

<p>Picked: {{picked}}</p>

• <select>

<select v-model="selected">

<option disabled value="">請選擇</option>

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<p>Selected: {{selected}}</p>

• group <select>

<select v-model="selected2" multiple>

<option disabled value="">請選擇</option>

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<p>Selected: {{selected2}}</p>

修飾符

• .lazy
• onchange時才改變值

• .number
• 將值轉換為number, 轉換失敗變成預設值

• .trim
• 去除左右空白

source code