Vue.js中 v-model 指令的修飾符詳解
更新時間：2018年12月03日 08:58:01 作者：deniro
v-model 指令默認(rèn)會在 input 事件中加載輸入框中的數(shù)據(jù)（中文輸入法中輸入拼音的過程除外）。這篇文章通過實例代碼給大家介紹Vue.js中 v-model 指令的修飾，感興趣的朋友跟隨小編一起看看吧
1 .lazy
v-model 指令默認(rèn)會在 input 事件中加載輸入框中的數(shù)據(jù)（中文輸入法中輸入拼音的過程除外）。我們可以使用 .lazy 懶加載修飾符，讓其只在 change 事件中再加載輸入框中的數(shù)據(jù)。
html：
<div id="app">
<input type="text" v-model.lazy="content" placeholder="請輸入" value="初始值">
<p>輸入框：{{content}}</p>
</div>
js：
var app = new Vue({
el: '#app',
data: {
content: ''
}
});
效果：
使用 .lazy 懶加載修飾符之后，只有在輸入框失去焦點或者按回車鍵時才會更新 content 值。
2 .number
輸入框輸入的內(nèi)容，即使是數(shù)字，默認(rèn)也是 string 類型：
在此，我們可以使用 .number 修飾符讓其轉(zhuǎn)換為 number 類型——
html：
<div id="app2">
<input type="number" v-model.number="content" placeholder="請輸入" >
<p>輸入值：{{content}}，輸入類型：{{typeof content}}</p>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
content: 1
}
});
效果：
3 .trim
使用 ·.trim` 修飾符可以自動過濾掉輸入框的首尾空格。
html：
<div id="app3">
<input type="text" v-model.trim="content" placeholder="請輸入" value="初始值">
<p>輸入框：{{content}}</p>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
content: ''
}
});
以上示例 DEMO
PS：下面通過代碼看下v-model指令及其修飾符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<pre><h2>{{name}}</h2></pre>
</div>
<div>
<input type="text" v-model.lazy="name">
<pre><h2>{{name}}</h2></pre>
</div>
<div>
<input type="text" v-model.trim="name">
<pre><h2>{{name}}</h2></pre>
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
var app = new Vue(
{
el:"#app",
data:{
name:""
},
methods:{
}
}
)
總結(jié)
以上所述是小編給大家介紹的Vue.js中 v-model 指令的修飾符詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue之elementUi的el-select同時獲取value和label的三種方式
這篇文章主要介紹了vue之elementUi的el-select同時獲取value和label的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏
這篇文章主要介紹了vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue不同項目之間傳遞、接收參數(shù)問題,主要針對是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請求，服務(wù)網(wǎng)關(guān)會進行過濾，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue項目運行或打包時，頻繁內(nèi)存溢出情況的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了在 Vue 中編寫 SVG 圖標(biāo)組件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解如何寫出一個利于擴展的vue路由配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了從0搭建vue-cli4腳手架，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
基于Vue和CSS實現(xiàn)漸變柵格進度條,通過劃分柵格單元、顏色漸變、標(biāo)簽與刻度的絕對定位來實現(xiàn)高度靈活和交互性,進度條劃分為多個柵格,每個單元格顏色漸變并且連續(xù),可以根據(jù)不同的場景配置個性化屬性,具有極高的靈活度和交互性,感興趣的朋友一起看看吧2025-03-03