學習要點:
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)整理發布!