vue按鍵修飾符


1.在做項目中有時會用到鍵盤事件,那么vue也提供了監聽鍵盤事件。我們可以通過v-on添加按鍵修飾符,完成相應的功能。

2.代碼實現:

 <div id="app">
        <input type="text" id="username" v-on:keyup.enter="submit()">
        <button v-on:click="submit()" id="btn">你點我試試</button>
    </div>
    <script type="text/javascript" src="js/vue.js">
    </script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            methods: {
                submit() {
                    alert("試試就試試");
                }
            }
        })
    </script>
3.代碼解釋
 
v-on:keyup.enter="submit()"
v-on指令綁定enter鍵事件,點擊執行submit()函數事件,
同樣也可以簡寫為@keyup.enter="submit()"
下面的button按鈕也綁定了點擊事件,執行函數submit();
 
4.同樣vue監聽按鍵事件也可以添加其他的按鍵:只要加上相應的按鍵的名稱就行了

例如:@keyup.tab="";@keyup.delet = "";

里面寫按鍵觸發執行的事件就可以了。

 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM