目錄
- 1、什么是v-model
- 2、v-model實現(xiàn)原理
- 3、實現(xiàn)示例
- 3.1 實現(xiàn)text和textarea
- 3.2 實現(xiàn)checkbox和radio
- 3.3 實現(xiàn)select
1、什么是v-model
v-model 本質(zhì)上是一顆語法糖，可以用 v-model 指令在表單 <input>、<textarea> 及 <select>元素上創(chuàng)建雙向數(shù)據(jù)綁定。- 它會根據(jù)控件類型自動選取正確的方法來更新元素。它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。
- 數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data。
- v-model:value 可以簡寫為 v-model，因為v-model默認收集的就是value值。
- v-model只能應(yīng)用在表單類元素（輸入類元素）上。
2、v-model實現(xiàn)原理
- v-model本質(zhì)上只是一顆語法糖，真正的實現(xiàn)靠的還是
v-bind和oninput事件。 - v-bind：綁定響應(yīng)式數(shù)據(jù)
- 觸發(fā)oninput 事件并傳遞數(shù)據(jù)
- v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
- text 和 textarea 元素使用
value 屬性和 input 事件； - checkbox 和 radio 使用
checked 屬性和 change 事件； - select 字段將
value 作為 prop 并將 change 作為事件。
3、實現(xiàn)示例
3.1 實現(xiàn)text和textarea
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input type="text" placeholder="請輸入內(nèi)容" :value="info" @input="change"><textarea name="" id="" cols="30" rows="10" :value="info" @input="change"></textarea></div><script>Vue.createApp({data() {return {info: ''}},methods: {change(e) {this.info = e.target.value}}}).mount('#app')</script>
</body></html>
3.2 實現(xiàn)checkbox和radio
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input type="checkbox" :checked="info" @change="change"><input type="radio" :checked="info" @change="change" name="h"></div><script>Vue.createApp({data() {return {info: ''}},methods: {change(e) {console.log(e.target.checked);this.info = e.target.checked}}}).mount('#app')</script>
</body></html>
- 實現(xiàn)效果：
3.3 實現(xiàn)select
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><select name="" id="" :value="info" @change="change"><option value="江西">江西</option><option value="湖南">湖南</option><option value="北京">北京</option><option value="上海">上海</option></select></div><script>Vue.createApp({data() {return {info: ''}},methods: {change(e) {console.log(e.target.value);this.info = e.target.value}}}).mount('#app')</script>
</body></html>
- 實現(xiàn)效果：
