<div id="app">
<div class="p-5">
<h3>修飾符</h3>
<h4>按鍵修飾符*</h4>
<ul>
<li>keyAlias - 只當事件是從特定鍵觸發時才觸發。</li>
<li>別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right</li>
<li>修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 - .ctrl, .alt, .shift, .meta</li>
</ul>
<h6 class="mt-3">別名修飾</h6>
<input type="text" class="form-control" v-model="text" @keyup.enter="trigger('enter')">
<h6 class="mt-3">相應按鍵時才觸發的監聽器</h6>
<input type="text" class="form-control" v-model="text" @keyup.shift.enter="trigger('shift + Enter')">
<h6 class="mt-3">特定鍵</h6>
<input type="text" class="form-control" v-model="text" @keyup.h="trigger('h')">
</div>
</div>
const App = {
data() {
return {
text: '小明',
isTransform: true,
num: 10,
event: 'click',
}
},
methods: {
trigger: function(name) {
console.log(name, '此事件被觸發了')
}
}
};
Vue.createApp(App).mount('#app');
