Vue中v-model的使用示例詳解
一，v-model是什么
v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會(huì)在更新data綁定屬性時(shí)候，更新頁面上輸入控件的值。
二，為什么使用v-model
v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發(fā)效率。在view層，model層相互需要數(shù)據(jù)交互，即可使用v-model。
三，v-model的原理簡單描述
v-model主要提供了兩個(gè)功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會(huì)更新view層的數(shù)值變化。
四，用途
用于在表單類元素(單選、多選、下拉選擇、輸入框等)上雙向綁定數(shù)據(jù)。
簡單使用
v-model與input輸入框的搭配使用：
<div id="app">
<input type="text" v-model="message" placeholder="輸入...."/>
<p>輸入的內(nèi)容是：{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>注意
使用v-model后：
1.表單控件顯示的值只依賴所綁定的數(shù)據(jù)，不再關(guān)心初始化時(shí)的value屬性
2.對(duì)于在之間插入的值，也不會(huì)生效
3.使用v-model時(shí)，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是拼音階段，Vue是不會(huì)更新數(shù)據(jù)的，當(dāng)敲下漢字時(shí)才會(huì)觸發(fā)更新。如果希望總是實(shí)時(shí)更新，可以使用@input代替v-model
用法：
<div id="app">
<textarea @input="handleInput" placeholder="輸入..."></textarea>
<p>輸入的內(nèi)容是：</p>
<p style="white-space: pre;">{{text}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
text:''
},
methods:{
handleInput:function(e){
this.text = e.target.value;
}
}
})
</script>單選按鈕上使用
單選按鈕在單獨(dú)使用時(shí)，不需要v-model，直接使用v-bind綁定一個(gè)布爾類型的值，為真時(shí)選中，為否時(shí)不選。
例：
<div id="app">
<input type="radio" :checked="picked"/>
<label>單選按鈕</label>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
picked:true
}
})
</script>如果是組合使用來實(shí)現(xiàn)互斥選擇的效果，就需要v-model配合value來使用。
例：
<div id="app">
<input type="radio" v-model="picked" id="badminton" value="羽毛球" />
<label for="badminton">羽毛球</label>
<br/>
<input type="radio" v-model="picked" id="basketball" value="籃球" />
<label for="basketball">籃球</label>
<br/>
<input type="radio" v-model="picked" id="football" value="足球" />
<label for="football">足球</label>
<br/>
<p>選擇的項(xiàng)是：{{picked}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
picked:"籃球"
}
})
</script>數(shù)據(jù)的picked值與單選按鈕的value值一致時(shí)，就會(huì)選中該項(xiàng)。
復(fù)選框上使用
復(fù)選框也分單獨(dú)使用和組合使用，不過用法稍與單選不同。復(fù)選框單獨(dú)使用時(shí)，是用v-model來綁定一個(gè)布爾值。
例：
在勾選時(shí)，數(shù)據(jù)checked的值變?yōu)榱藅rue，label中渲染的內(nèi)容也會(huì)更新。
<div id="app">
<input type="checkbox" v-model="checked" id="checked"/>
<label for="checked">選擇狀態(tài)：{{checked}}</label>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
checked:false
}
})
</script>組合使用時(shí)，也是v-model與value一起，多個(gè)勾選框都綁定到同一個(gè)數(shù)組類型的數(shù)據(jù)，value的值在數(shù)組當(dāng)中，就會(huì)選中這一項(xiàng)。這一過程也是雙向的，在勾選時(shí)，value的值也會(huì)自動(dòng)push到這個(gè)數(shù)組中。
例：
<div id="app">
<input type="checkbox" v-model="checked" id="badminton" value="羽毛球" />
<label for="badminton">羽毛球</label>
<br/>
<input type="checkbox" v-model="checked" id="basketball" value="籃球" />
<label for="basketball">籃球</label>
<br/>
<input type="checkbox" v-model="checked" id="football" value="足球" />
<label for="football">足球</label>
<br/>
<p>選擇的項(xiàng)是：{{checked}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
checked:['羽毛球', '籃球']
}
})
</script>選擇列表上使用
選擇列表就是下拉選擇器，也就是常見的表單控件，同樣也分為單選和多選兩種。
單選例：
**備注：**option是備選項(xiàng)，如果含有value屬性，v-model會(huì)優(yōu)先匹配value值；如果沒有，就會(huì)直接匹配option的text，比如選中第一項(xiàng)時(shí)，selected的值是badminton，而不是羽毛球，但選中第二項(xiàng)時(shí)，由于沒有value屬性，selected的值就是籃球。
<div id="app">
<select v-model="selected">
<option value ="badminton">羽毛球</option>
<option>籃球</option>
<option>足球</option>
</select>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
selected:'籃球'
}
})
</script>多選例：
**備注：**給添加屬性multiple就可以多選了，此時(shí)v-model綁定的是一個(gè)數(shù)組，與復(fù)選框用法類似。
<div id="app">
<select v-model="selected" <multiple></multiple>>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
selected:'basketball',
options:[
{text:'籃球', value:'basketball'},
{text:'羽毛球', value:'badminton'},
{text:'足球', value:'football'}
]
}
})
</script>注：雖然用選擇列表可以很簡單地完成下拉選擇的需求，但在實(shí)際業(yè)務(wù)中由于樣式依賴平臺(tái)和瀏覽器，無法統(tǒng)一，也不太美觀，功能也受限，比如不支持搜索，故并不常用。常見的解決方案是用div模擬一個(gè)類似的控件。
修飾符
與事件修飾符類似，v-model也有修飾符，用于控制數(shù)據(jù)同步的時(shí)機(jī)。
.lazy
在輸入框中，v-model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)(除了提示中介紹的中文輸入 法情況外)，使用修飾符.lazy會(huì)轉(zhuǎn)變?yōu)樵赾hange事件中同步，示例代碼如下：
<div id="app">
<input type="text" v-model.lazy="message"/>
<p>{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>這時(shí)，message并不是實(shí)時(shí)改變的，而是在失焦或按回車時(shí)才更新。
.number
使用修飾符.number可以將輸入轉(zhuǎn)換為Number類型，否則雖然你輸入的是數(shù)字，但它的類型其實(shí)是String，比如在數(shù)字輸入框時(shí)會(huì)比較有用，示例代碼如下：
<div id="app">
<input type="number" v-model.number="message"/>
<p>{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>.trim
修飾符.trim可以自動(dòng)過濾輸入的首尾空格，示例代碼如下：
到此這篇關(guān)于Vue中v-model的使用示例詳解的文章就介紹到這了,更多相關(guān)Vue v-model使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue中指令v-model的原理及使用方法
- Vue3?使用v-model實(shí)現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
- vue3的組件通信&v-model使用實(shí)例詳解
- vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案
- Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
- Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
- vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
- 使用vue初用antd 用v-model來雙向綁定Form表單問題
- Vue組件上使用v-model之單選框
相關(guān)文章
Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請(qǐng)求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時(shí)間,對(duì)遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下2018-07-07
Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model的詳細(xì)
v-model 是 vue3 中的一個(gè)內(nèi)置指令，很多表單元素都可以使用這個(gè)屬性，如 input、checkbox 等，咱可以在自定義組件中實(shí)現(xiàn) v-model，這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model,需要的朋友可以參考下2022-10-10
vue3.0+element Plus實(shí)現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
這篇文章主要介紹了vue3.0+element Plus實(shí)現(xiàn)頁面布局，側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue filter 過濾器、以及在table中的使用介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題
這篇文章主要介紹了簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue/React/Angular渲染失效原因解析與修復(fù)指南
在Vue、React和Angular中,為什么數(shù)據(jù)變了界面卻不動(dòng),每個(gè)框架的常見失效場景有哪些,我們又該如何診斷和修復(fù),下面小編就來和大家簡單聊聊吧2025-08-08
Vue實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)百分比進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽
今天小編就為大家分享一篇vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11