Vue.js按鍵修飾符及v-model修飾符示例詳解
一、按鍵修飾符
v-on指令用來進行事件監(jiān)聽（如單擊事件、鍵盤事件等）
v-on監(jiān)聽鍵盤事件的基本使用示例：
<div id="root">
<input type="text" v-on:keyup="counter+=1">
<p>在輸入框輸入了{{counter}}個字符</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
counter: 0
},
methods: {
}
})
</script>執(zhí)行結果：
在監(jiān)聽鍵盤事件時，經常需要檢查詳細的按鍵。Vue.js允許為v-on在監(jiān)聽鍵盤事件時添加按鍵修飾符。例如：
<!-- 只有在'key'是'enter'時調用'submit()'--> <input v-on:keyup.enter="submit()"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
下面列出官方提供的所有按鍵修飾符別名：
.enter => //enter鍵 .tab => //tab鍵 .delete (捕獲"刪除"和"退格"按鍵) => //刪除鍵 .esc => //取消鍵 .space => //空格鍵 .up => //上 .down => //下 .left => //左 .right => //右
（1）回車鍵按鍵修飾符示例
<div id="root">
<input type="text" v-model="content" v-on:keyup.enter="fun(content)">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content: ''
},
methods: {
fun:function(data){
alert('錄入內容為：'+data);
this.content='';
}
}
})
</script>執(zhí)行結果：
在input框中輸入"夏志121"后按下回車鍵，松開回車鍵后在瀏覽器中將彈出對話框"錄入內容為：夏志121"。
（2）自定義按鍵修飾符示例
Vue.js還支持自定義按鍵修飾符，可以利用按鍵對應的鍵碼來實現，可以把上面的功能改成松開F2后彈出輸入的內容，而F2對應的鍵碼是113，那么久可以對代碼進入如下修改：
<div id="root">
<input type="text" v-model="content" v-on:keyup.113="fun(content)">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content: ''
},
methods: {
fun:function(data){
alert('錄入內容為：'+data);
this.content='';
}
}
})
</script>執(zhí)行結果：
在input框中輸入"你好"后按下F2，松開F2后在瀏覽器中將彈出"錄入內容為：你好"。
二、v-model修飾符
v-model可以實現表單元素和數據的雙向綁定。與事件修飾符類似，v-model指令也有修飾符，用于控制數據同步的機制。
（1）.lazy
v-model默認是在input事件中同步輸入框中的內容的，即一旦有數據發(fā)生改變，對應data中的數據就會自動發(fā)生改變。若使用lazy修飾符，可以讓數據在失去焦點或回車時會更新。
v-model的lazy修飾符使用示例：
<div id="root">
<input v-model.lazy="content">
<div>{{content}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content:"這是content"
},
methods: {
}
})
</script>執(zhí)行結果：
（2）.number
默認情況下，在輸入框中輸入的內容會被當作字符串類型進行處理，這是HTML的底層邏輯造成的，如果加上number修飾符，就可以讓你在輸入數字的時候將輸入的內容轉換成number類型。
v-model的number修飾符使用示例：
<div id="root"><br><br>
<input v-model="content1">
<div>【不加number修飾符】輸入內容：{{content1}}</div>
<div>【不加number修飾符】數據類型：{{typeof content1}}</div>
<input v-model.number="content2">
<div>【不加number修飾符】輸入內容：{{content2}}</div>
<div>【不加number修飾符】數據類型：{{typeof content2}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content1:"這是content1",
content2:"這是content2"
},
methods: {
}
})
</script>執(zhí)行結果：
分別在第一個輸入框和第二個輸入框中輸入"121"，在瀏覽器生成的內容如下：
（3）.trim
trim修飾符可以去除輸入內容左右兩邊的空格。
v-model的trim修飾符使用示例：
<div id="root">
<input v-model.trim="content">
<div>輸入內容：{{content}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content:"content"
},
methods: {
}
})
</script>執(zhí)行結果：
到此這篇關于Vue.js按鍵修飾符及v-model修飾符的文章就介紹到這了,更多相關Vue.js v-model修飾符內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
el-upload組件文件上傳都是每個文件請求一次接口,本次實現一次請求上傳多個文件,下面這篇文章主要給大家介紹了關于使用el-upload組件實現遞歸多文件上傳的相關資料,需要的朋友可以參考下2023-03-03
Vue插槽,是學習vue中必不可少的一節(jié),越來越發(fā)現插槽的好用,而過濾數據也是我們日常開發(fā)中必然會用到的,這篇文章主要給大家介紹了關于Vue插槽和過濾器的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
vue2.0 實現導航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實現導航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛(wèi)（navigation-guards），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了vue3配置全局參數(掛載全局方法)以及組件的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
今天小編就為大家分享一篇vue2使用keep-alive緩存多層列表頁的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇淺談vue-router路由切換 組件重用挖下的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了Vue3+cesium環(huán)境搭建的實現示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要為大家詳細介紹了Vue使用screenfull實現全屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
由于目前公司采用了ProtoBuf做前后端數據交互，進公司以來一直用的是公司大神寫好的基礎庫，完全不了解底層是如何解析的。下面小編給大家分享vue中使用protobuf的過程記錄，需要的朋友參考下吧2018-10-10