vue v-on key modifiers

20171228

by Syuan Shih

HTML

<div id="app">
    <p>
        按滑鼠左鍵才有反應：
        <button @click.left="testFunction()">點我</button>
    </p>
    <p>
        按滑鼠右鍵才有反應：
        <button @click.right="testFunction()">點我</button>
    </p>
    <p>
        <!-- run的時候要去點一下按鈕 -->
        別名 - 按鍵盤space才有反應：
        <button @keyup.space="testFunction()">點我</button>
    </p>
    <p>
        <!-- run的時候要去點一下按鈕 -->
        代碼 - 按鍵盤enter才有反應：
        <button @keyup.13="testFunction()">點我</button>
    </p>
</div>

CSS

p {
    padding-left: 1rem;
}

JavaScript

var vm = new Vue({
	el: '#app',
    methods: {
    	testFunction () {
        	alert('Hello!');
        }
    }
});