Vue中v-model指令如何使用-創(chuàng)新互聯(lián)
今天就跟大家聊聊有關(guān)Vue中v-model指令如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)公司專(zhuān)注于全州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供全州營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，全州網(wǎng)站制作、全州網(wǎng)頁(yè)設(shè)計(jì)、全州網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開(kāi)發(fā)服務(wù)，打造全州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供
全州網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
v-model 用在 input 元素上時(shí)
v-model雖然很像使用了雙向數(shù)據(jù)綁定的 Angular 的 ng-model，但是 Vue 是單項(xiàng)數(shù)據(jù)流，v-model 只是語(yǔ)法糖而已：↓
第一行的代碼其實(shí)只是第二行的語(yǔ)法糖。然后第二行代碼還能簡(jiǎn)寫(xiě)成這樣：↓
要理解這行代碼，首先你要知道 input 元素本身有個(gè) oninput 事件，這是 HTML5 新增加的，類(lèi)似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化，就會(huì)觸發(fā) oninput ，把最新的value傳遞給 sth。
如果你不知道 $event 是從哪來(lái)的，那你需要點(diǎn)擊它再?gòu)?fù)習(xí)一下文檔。
我們仔細(xì)觀察語(yǔ)法糖和原始語(yǔ)法那兩行代碼，可以得出一個(gè)結(jié)論：
在給 元素添加 v-model 屬性時(shí)，默認(rèn)會(huì)把 value 作為元素的屬性，然后把 'input' 事件作為實(shí)時(shí)傳遞 value 的觸發(fā)事件
v-model 用在組件上時(shí)
v-model 不僅僅能在 input上用，在組件上也能使用，下面是一個(gè)和 Vue 官網(wǎng)教程類(lèi)似的例子（在看這個(gè)例子時(shí)我們要考慮兩個(gè)問(wèn)題）：
父組件的 price 的初始值是 100，更改子組件的值能實(shí)時(shí)更新父組件的 price
{{price}}
如果你知道這兩個(gè)問(wèn)題的答案，那么恭喜你真正掌握了 v-model，如果你沒(méi)明白，那么可以看下這段代碼：↓
現(xiàn)在你知道 value 和 input 從哪來(lái)的了吧。與上面總結(jié)的類(lèi)似：
給組件添加 v-model 屬性時(shí)，默認(rèn)會(huì)把 value 作為組件的屬性，然后把 'input' 值作為給組件綁定事件時(shí)的事件名
v-model 的缺點(diǎn)和解決辦法
在創(chuàng)建類(lèi)似復(fù)選框或者單選框的常見(jiàn)組件時(shí)，v-model就不好用了。
v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，并且當(dāng)你點(diǎn)擊這個(gè)單選框的時(shí)候不會(huì)觸發(fā) oninput 事件，它只會(huì)觸發(fā) onchange 事件。這就尷尬了?
因?yàn)?v-model 只是用到了 input 元素上，所以這種情況好解決：↓
當(dāng) v-model 用到組件上時(shí)：↓
Vue.component('my-checkbox', {
tempalte: ``
props: ['value'],
})
在 Vue 2.2 版本，你可以在定義組件時(shí)通過(guò) mode l選項(xiàng)的方式來(lái)定制 prop/event：↓
Vue.component('my-checkbox', {
tempalte: `
@change="$emit('balabala', $event.target.checked)"
:checked="value"
/>`
props: ['checked'], //這里就不用 value 了，而是 checked
model: {
prop: 'checked',
event: 'balabala'
},
})
看完上述內(nèi)容，你們對(duì)Vue中v-model指令如何使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
分享文章：Vue中v-model指令如何使用-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://weahome.cn/article/dsodgj.html
重慶分公司
重慶分公司
