快捷導(dǎo)航

Vue.js按鍵修飾符及v-model修飾符示例詳解

更新時間：2023年05月03日 10:22:15 作者：夏志121

這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、按鍵修飾符

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é)果：

在監(jiān)聽鍵盤事件時，經(jīng)常需要檢查詳細的按鍵。Vue.js允許為v-on在監(jiān)聽鍵盤事件時添加按鍵修飾符。例如：

<!-- 只有在'key'是'enter'時調(diào)用'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('錄入內(nèi)容為：'+data);
                    this.content='';
                }
            }
        })
    </script>

執(zhí)行結(jié)果：

在input框中輸入"夏志121"后按下回車鍵，松開回車鍵后在瀏覽器中將彈出對話框"錄入內(nèi)容為：夏志121"。

（2）自定義按鍵修飾符示例

Vue.js還支持自定義按鍵修飾符，可以利用按鍵對應(yīng)的鍵碼來實現(xiàn)，可以把上面的功能改成松開F2后彈出輸入的內(nèi)容，而F2對應(yīng)的鍵碼是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('錄入內(nèi)容為：'+data);
                    this.content='';
                }
            }
        })
    </script>

執(zhí)行結(jié)果：

在input框中輸入"你好"后按下F2，松開F2后在瀏覽器中將彈出"錄入內(nèi)容為：你好"。

二、v-model修飾符

v-model可以實現(xiàn)表單元素和數(shù)據(jù)的雙向綁定。與事件修飾符類似，v-model指令也有修飾符，用于控制數(shù)據(jù)同步的機制。

（1）.lazy

v-model默認是在input事件中同步輸入框中的內(nèi)容的，即一旦有數(shù)據(jù)發(fā)生改變，對應(yīng)data中的數(shù)據(jù)就會自動發(fā)生改變。若使用lazy修飾符，可以讓數(shù)據(jù)在失去焦點或回車時會更新。

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í)行結(jié)果：

（2）.number

默認情況下，在輸入框中輸入的內(nèi)容會被當作字符串類型進行處理，這是HTML的底層邏輯造成的，如果加上number修飾符，就可以讓你在輸入數(shù)字的時候?qū)⑤斎氲膬?nèi)容轉(zhuǎn)換成number類型。

v-model的number修飾符使用示例：

    <div id="root"><br><br>
        <input v-model="content1">
        <div>【不加number修飾符】輸入內(nèi)容：{{content1}}</div>
        <div>【不加number修飾符】數(shù)據(jù)類型：{{typeof content1}}</div>
        <input v-model.number="content2">
        <div>【不加number修飾符】輸入內(nèi)容：{{content2}}</div>
        <div>【不加number修飾符】數(shù)據(jù)類型：{{typeof content2}}</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content1:"這是content1",
                content2:"這是content2"
            },
            methods: {
            }
        })
    </script>

執(zhí)行結(jié)果：

分別在第一個輸入框和第二個輸入框中輸入"121"，在瀏覽器生成的內(nèi)容如下：

（3）.trim

trim修飾符可以去除輸入內(nèi)容左右兩邊的空格。

v-model的trim修飾符使用示例：

    <div id="root">
        <input v-model.trim="content">
        <div>輸入內(nèi)容：{{content}}</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content:"content"
            },
            methods: {
            }
        })
    </script>

執(zhí)行結(jié)果：