學習要點：
1.輸入綁定
本節課我們來開始學習 Vue3.x 的表單輸入綁定的使用方法。
一．輸入綁定
1. 使用 v-model 指令可以實現 input、textarea 和 select 的雙向綁定；
2. 它本質上是一個語法糖，負責監聽用戶輸入數據并進行數據的更新操作；
3. 我們使用 input 來測試 v-model 的使用方法，并實現時時更新數據；
<input type="text" placeholder="請輸入內容" v-model="message">
<div>{{message}}div>
data() {
return {
message : 'Hello, Vue3.x~'
}
},
PS：當我們在 input 文本框編輯的時候，div 中的內容會時時更新；
PS：v-model 對 input 和 textarea 處理時，會拋出 input 事件來時時更新；
4. 單個復選框，可以直接綁定布爾值 true 和 false，自動識別是否勾選；
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}label>
return {
checked : true,
}
PS：v-model 在 checkbox 和 radio 處理時，會拋出 change 事件來時時更新；
5. 多個復選框，可以通過綁定實現選擇獲取信息；
<input type="checkbox" id="a" value="Mr.Lee" v-model="checkedNames">
<label for="a">Mr.Leelabel>
<input type="checkbox" id="b" value="Mr.Wang" v-model="checkedNames">
<label for="b">Mr.Wanglabel>
<input type="checkbox" id="c" value="Mr.Zhang" v-model="checkedNames">
<label for="c">Mr.Zhanglabel>
<div>{{checkedNames}}div>
return {
checkedNames : [],
}
6. 單選按鈕，綁定后和復選框實現一樣的效果；
<input type="radio" id="one" value="男" v-model="gender">
<label for="one">男label>
<input type="radio" id="two" value="女" v-model="gender">
<label for="two">女label>
return {
gender : '男'
}
7. 下拉選擇框，分單選和多選，基本同上；
<select v-model="selected">
<option>北京option>
<option>上海option>
<option>廣州option>
<option>深圳option>
select>
<div>{{selected}}div>
return {
select : ''
}
PS：v-model 在 select 處理時，會拋出 change 事件來時時更新；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
