在vue中有什么按鍵修飾符

發(fā)布時(shí)間：2022-01-04 12:15:05 來源：億速云閱讀：264 作者：小新欄目：web開發(fā)

這篇文章主要介紹了在vue中有什么按鍵修飾符，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue中的按鍵修飾符有：1、“.enter”，可捕獲enter鍵；2、“.tab”，可捕獲tab鍵；3、“.delete”，可捕獲“刪除”和“退格”按鍵；4、“.esc”，可捕獲取消鍵；5、“.space”，可捕獲空格鍵；6、“.up”等。

本教程操作環(huán)境：windows10系統(tǒng)、vue2.9.6版，DELL G3電腦。

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要查找常用按鍵對(duì)應(yīng)的 code 值。Vue 可以在 v-on 上添加按鍵修飾符，用于監(jiān)聽按鍵事件

這里列出所有的按鍵修飾符別名：

.enter => // enter鍵
.tab => // tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => // 刪除鍵
.esc => // 取消鍵
.space => // 空格鍵
.up => // 上
.down => // 下
.left => // 左
.right => // 右

在我們平常登錄功能的操作中，輸入密碼后會(huì)按下回車進(jìn)行登錄，這樣就不需要在操作鼠標(biāo)點(diǎn)擊登錄按鈕了，那么這一功能在vue中是怎么實(shí)現(xiàn)的呢

我們做一個(gè)簡單的添加數(shù)據(jù)功能，來演示這個(gè)案例：

  <style>
        table{
            width:760px;
            /* margin: 0 auto; */
            border-collapse: collapse;
        }   
        table td{
            border: 1px solid black;
            width: .4rem;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <label for="">id</label>
        <input type="text" v-model="id">
        <label for="">name</label>
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add()">
 
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'哈哈'}
                ],
                id:'',
                name:''
            },
            methods: {
                add(){
                    // 向數(shù)組的最后一位添加新的對(duì)象
                    this.list.push({id:this.id,name:this.name})
                    // 完成添加后清空文本框
                    this.id=this.name=""
                }
            }
        })
    </script>
</body>

這個(gè)時(shí)候是這可以通過點(diǎn)擊添加按鈕去添加的

在vue中有什么按鍵修飾符

在原生js中有提供了 keyup 按鍵抬起事件，那么可以把方法中心的 add 方法綁定到 keyup 抬起事件中，看看能否達(dá)到想要的效果，因?yàn)槲覀兪窃谳斎胪?name 之后去敲回車，所以把 keyup 事件綁定到我們的 name 文本框中

 <input type="text" v-model="name" @keyup="add()">

在vue中有什么按鍵修飾符

可以看到，當(dāng)輸入完name之后還沒有敲擊回車鍵，就已經(jīng)自動(dòng)添加了，這時(shí)候就需要用到按鍵修飾符了

                                 <!-- enter:回車鍵 -->
<input type="text" v-model="name" @keyup.enter="add()">

當(dāng)輸入完成后，并且文本框還在獲得焦點(diǎn)的同時(shí)，在敲回車的時(shí)候，才會(huì)執(zhí)行add函數(shù)：

在vue中有什么按鍵修飾符

除了 enter 之外，Vue官網(wǎng)還提供了以下修飾符：

為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

那么除了Vue提供的這些按鍵之外，其他按鍵可不可以使用呢，我們拿 f4 舉個(gè)例子

<input type="text" v-model="name" @keyup.f4="add()">

在vue中有什么按鍵修飾符

這是Vue在2.5.0新增的自動(dòng)匹配按鍵修飾符，但是我們一般只使用功能鍵去充當(dāng)按鍵修飾符，

盡量不要使用要輸入的鍵

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“在vue中有什么按鍵修飾符”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

在vue中有什么按鍵修飾符

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽