表單輸入綁定 · 教案-標準教案-前端高階(v1)

## 表單輸入綁定 ### 基礎用法 ~~~ 你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理 ~~~ ~~~ <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ~~~ ~~~ <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> ~~~ ~~~ <input v-bind:value="test" v-on:input="test=$event.target.value"> ~~~ ### 復選框 ~~~ <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> ~~~ 多個復選框，綁定到同一個數組 ~~~ <div id='app'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> ~~~ ~~~ new Vue({ el: '#app', data: { checkedNames: [] } }) ~~~ ### 單選按鈕 ~~~ <div id="app"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> ~~~ ~~~ new Vue({ el: '#app', data: { picked: '' } }) ~~~ ### 選擇框單選 ~~~ <div id="example-5"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> ~~~ ~~~ new Vue({ el: '...', data: { selected: '' } }) ~~~ 多選 ~~~ <div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> ~~~ ~~~ new Vue({ el: '#example-6', data: { selected: [] } }) ~~~ ### 修飾符 1.lazy ~~~  <input v-model.lazy="msg" > ~~~ 2.number ~~~ <input v-model.number="age" type="number"> ~~~ 3.trim ~~~ <input v-model.trim="msg"> ~~~ ### 課后習題 1.使用vue表單輸入綁定的知識點完成一個表單，表單里面包括用戶姓名（input），性別（radio），年齡段（select），愛好（checkbox）。然后點擊提交，打印出表單里用戶輸入的信息。