您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue v-model怎么使用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue v-model怎么使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
表單提交是開發(fā)中非常常見的功能,也是和用戶交互的重要手段:
比如用戶在登錄、注冊(cè)時(shí)需要提交賬號(hào)密碼;
比如用戶在檢索、創(chuàng)建、更新信息時(shí),需要提交一些數(shù)據(jù);
這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù),我們通常會(huì)使用v-model指令來完成:
v-model指令可以在表單 input、textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定;
它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素;
盡管有些神奇,但 v-model 本質(zhì)上不過是語(yǔ)法糖,它負(fù)責(zé)監(jiān)聽用戶的輸入事件來更新數(shù)據(jù),并在某種極端場(chǎng)景
下進(jìn)行一些特殊處理;
官方有說到,v-model的原理其實(shí)是背后有兩個(gè)操作:
v-bind綁定value屬性的值;
v-on綁定input事件監(jiān)聽到函數(shù)中,函數(shù)會(huì)獲取最新的值賦值到綁定的屬性中;
我們?cè)賮斫壎ㄒ幌缕渌谋韱晤愋停簍extarea、checkbox、radio、select
我們來看一下綁定textarea:
我們來看一下v-model綁定checkbox:?jiǎn)蝹€(gè)勾選框和多個(gè)勾選框
單個(gè)勾選框:
v-model即為布爾值。
此時(shí)input的value并不影響v-model的值。
多個(gè)復(fù)選框:
當(dāng)是多個(gè)復(fù)選框時(shí),因?yàn)榭梢赃x中多個(gè),所以對(duì)應(yīng)的data中屬性是一個(gè)數(shù)組。
當(dāng)選中某一個(gè)時(shí),就會(huì)將input的value添加到數(shù)組中。
v-model綁定radio,用于選擇其中一項(xiàng);
和checkbox一樣,select也分單選和多選兩種情況。
單選:只能選中一個(gè)值
v-model綁定的是一個(gè)值;
當(dāng)我們選中option中的一個(gè)時(shí),會(huì)將它對(duì)應(yīng)的value賦值到fruit中;
多選:可以選中多個(gè)值
v-model綁定的是一個(gè)數(shù)組;
當(dāng)選中多個(gè)值時(shí),就會(huì)將選中的option對(duì)應(yīng)的value添加到數(shù)組fruit中;
目前我們?cè)谇懊娴陌咐写蟛糠值闹刀际窃趖emplate中固定好的:
比如gender的兩個(gè)輸入框值male、female;
比如hobbies的三個(gè)輸入框值basketball、football、tennis;
在真實(shí)開發(fā)中,我們的數(shù)據(jù)可能是來自服務(wù)器的,那么我們就可以先將值請(qǐng)求下來,綁定到data返回的對(duì)象中,再通過v-bind來進(jìn)行值的綁定,這個(gè)過程就是值綁定。
這里不再給出具體的做法,因?yàn)檫€是v-bind的使用過程。
v-model修飾符 - lazy
lazy修飾符是什么作用呢?
默認(rèn)情況下,v-model在進(jìn)行雙向綁定時(shí),綁定的是input事件,那么會(huì)在每次內(nèi)容輸入后就將最新的值和綁定的屬性進(jìn)行同步;
如果我們?cè)趘-model后跟上lazy修飾符,那么會(huì)將綁定的事件切換為 change 事件,只有在提交時(shí)(比如回車)
才會(huì)觸發(fā)
我們先來看一下v-model綁定后的值是什么類型的:
message總是string類型,即使在我們?cè)O(shè)置type為number也是string類型;
如果我們希望轉(zhuǎn)換為數(shù)字類型,那么可以使用 .number 修飾符:
另外,在我們進(jìn)行邏輯判斷時(shí),如果是一個(gè)string類型,在可以轉(zhuǎn)化的情況下會(huì)進(jìn)行隱式轉(zhuǎn)換的:
下面的score在進(jìn)行判斷的過程中會(huì)進(jìn)行隱式轉(zhuǎn)化的
如果要自動(dòng)過濾用戶輸入的守衛(wèi)空白字符,可以給v-model添加 trim 修飾符
實(shí)際上v-model 只是語(yǔ)法糖而已。
<input v-model="inputValue" /> <input v-bind:value="inputValue" v-on:input="inputValue= $event.target.value" />
父組件
<template> <div id="demo"> <test-model v-model="inputValue"></test-model> <span>{{inputValue}}</span> </div> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ inputValue: "inputValue" } }, components: { testModel, } } </script> <style lang="scss" scoped> </style>
子組件
<template> <span> <input ref="input" :value="value" @input="$emit('ababab', $event.target.value)" > </span> </template> <script> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', //這個(gè)事件名可以隨意寫,它實(shí)際上是規(guī)定了子組件要更新父組件值需要注冊(cè)的方法 event: 'ababab' } } </script> <style lang="scss" scoped> </style>
原理:
1.展示:父組件v-model,子組件接收一個(gè)props值value,將它展示到子組件自己的input上。
2.改變:當(dāng)子組件自身發(fā)生改變時(shí),觸發(fā)自身的input方法,然后觸發(fā)父組件的事件方法,改變父組件的value,進(jìn)而改變接收的props,實(shí)現(xiàn)自身展示的改變
例子中使用了model,官網(wǎng)是這樣說的,實(shí)際上是為了單選框,復(fù)選框按鈕等情況的時(shí)候,他們的值并不是value,而是checked,這種情況下,就需要寫這個(gè)。
model: { prop: 'checked', event: 'change' },
讀到這里,這篇“vue v-model怎么使用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。