v-on修飾符筆記

修飾符是用點表示的指令後綴

事件修飾符

用法:

<a @click.stop="doThis"></a>

<form @submit.prevent="onSubmit"></form>

key修飾符

監聽使用者輸入按鍵觸發事件。

範例:

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

系統修改鍵

系統修改鍵與常規鍵不同，當與keyup事件一起使用時，先釋放系統修改鍵不會觸發事件，必須按著系統修改鍵式法常規鍵，才會觸發事件。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact修飾符

.exact修飾符可以控制觸發事件所需系統修改器的精確組合

<!-- 同時按下ctrl家紹其他系統鍵也可以觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 只有點選ctrl(沒有按其他系統修改鍵)才會觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 在沒有按下其他系統修改鍵時觸發 -->
<button @click.exact="onClick">A</button>

鼠標按鈕修飾符

滑鼠點擊觸發事件

點擊滑鼠右鍵
<button @click.right="onClick">A</button>

本作品采用《CC 协议》，转载必须注明作者和本文链接