您好,登錄后才能下訂單哦!
本篇文章為大家展示了v-model方法如何在Vue項(xiàng)目中使用 ,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
Vue 框架早已經(jīng)不是 MVVM(Mode-View-View-Model) 雙向綁定了。早在 Vue 1.0 時(shí)代,Vue 在剛出世的時(shí)候的確是 MVVM 雙向綁定。自 Vue 2.0 以來,Vue 就不再是雙向綁定了,而是像 React 一樣是單向綁定 MV(Model-View)了。但是,在 Vue 中仍保留了雙向綁定的接口,v-model 就是。
1. 基本用法
<template> <div id="app"> <input v-model="x"> {{x}} </div> </template> <script> export default { data(){ return { x: 'init' } } }
在 JS 中修改 x 的值,input 輸入框里也會(huì)隨之改變。同樣地,在頁面中的 input 輸入框內(nèi)手動(dòng)輸入值,變量 x 的值也會(huì)隨之改變。對(duì)象里的變量改變會(huì)影響視圖的 input 的改變,視圖中 input 的改變會(huì)影響對(duì)象里變量 x 值的改變。這就是雙向綁定(Model-View-View-Model)。
2. v-model
實(shí)質(zhì)上述使用 v-model 的代碼等價(jià)于如下代碼:
<template> <div id="app"> <input :value="x" @input="x = $event.target.value"> {{x}} </div> </template> <script> export default { data(){ return { x: 'init' } } } </script>
v-model 幫我們做的事就是,為 input 的 value 值設(shè)置一個(gè)動(dòng)態(tài)綁定,然后在輸入框的 input 事件觸發(fā)后實(shí)時(shí)修改動(dòng)態(tài)綁定的 value 的變量值。因此 v-model 實(shí)質(zhì)是上述方式的語法糖。
$event 是原生 DOM 事件里的 event 事件對(duì)象。
3. v-model 的修飾符
所有修飾符都是起一個(gè)輔助的作用,其實(shí)可以在函數(shù)里自己判斷條件實(shí)現(xiàn)。.lazyv-model 默認(rèn)監(jiān)聽的是輸入框的input 事件,原生 DOM 的input 事件就是記錄實(shí)時(shí)的輸入變化值。但是,我們有時(shí)不需要實(shí)時(shí)記錄結(jié)果,只需要記錄最終輸入的結(jié)果值就可以了。
input 的原生 DOM 事件中還有一個(gè)change 事件,該事件是在輸入框失去焦點(diǎn)時(shí) 或 按下回車鍵時(shí) 執(zhí)行的。v-model 里以.lazy 修飾符的方式切換至該監(jiān)聽模式。
<template> <div id="app"> <input v-model.lazy="x"> {{x}} </div> </template>等價(jià)于:<template> <div id="app"> <input :value="x" @change="x = $event.target.value"> {{x}} </div> </template>
.number.number修飾符是在輸入內(nèi)容改變后進(jìn)行變量賦值時(shí),自動(dòng)使用 parseFloat() 函數(shù)將其變成數(shù)字。使用該修飾符時(shí)變量的初始值必須是數(shù)字。
<template> <div id="app"> <input v-model.number="x"> {{x}} </div> </template> <script> export default { data(){ return { x: 0 } } } </script>
.trim修飾符是將輸入的內(nèi)容改變后進(jìn)行變量賦值時(shí),自動(dòng)忽略和去除前后的空格。更為精準(zhǔn)地記錄輸入的字符串內(nèi)容。
<template> <div id="app"> <input v-model.trim="x"> {{x}} </div> </template> <script> export default { data(){ return { x: 'init' } } } </script>
4. 自定義輸入框的 v-modelv-model
的基本用法僅僅適用于原生的輸入框元素 ,對(duì)于用戶自己封裝的輸入框,可以用如下方式使用 v-model。當(dāng)用在組件上時(shí),v-model 的實(shí)質(zhì)如下:
<custom-input v-model="x"></custom-input> 等價(jià)于: <custom-input :value="x" @input="x = $event"></custom-input>
因此,在自定義表單組件里的寫法如下:
<template> <div class="wrapper"> <input :value="value" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { props: { value: { type: String } } } </script> <style scoped> .wrapper{ border: 2px solid blue; display: inline-block; } .wrapper input{ color: red; } </style> <template> <div id="app"> <MyInput v-model="x"/> {{x}} </div> </template> <script> import MyInput from './components/MyInput' export default { data(){ return { x: 0 } }, components:{ MyInput } } </script>
補(bǔ)充:若想在自定義組件里面的原生輸入框也使用 v-model,可以根據(jù)組件 v-model 的實(shí)質(zhì),使用計(jì)算屬性的賦值方式為=使用。
上述內(nèi)容就是v-model方法如何在Vue項(xiàng)目中使用 ,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。