【Vue3】v-on修飾符

Vue3

 發表於 2024-12-19  |  2 分鐘  |  246 個字

【Vue3】v-on修飾符

Vue3

 發表於 2024-12-19  |  2 分鐘  |  246 個字

指定鍵盤按鍵觸發事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div id="app">
  <label>按enter鍵觸發事件</label>
  <input type="text" @keyup.enter="keyDown">
  <br>
  <label>按shift+enter鍵觸發事件</label>
  <input type="text" @keyup.shift.enter="keyDown">
  <br>
  <label>按p鍵觸發事件</label>
  <input type="text" @keyup.p="keyDown">
</div>


1
2
3
4
5
6
7

Vue.createApp({
  methods:{
    keyDown(){
      console.log("您已成功觸發事件");
    }
  }
}).mount("#app");

按下指定滑鼠鍵觸發事件

1
2
3
4
5

<div id="app">
  <button type="button" @click.left="clickMouse">用左鍵按觸發</button>
  <button type="button" @click.right="clickMouse">用右鍵按觸發</button>
  <button type="button" @click.middle="clickMouse">用中鍵按觸發</button>
</div>


1
2
3
4
5
6
7

Vue.createApp({
  methods:{
    clickMouse(){
      console.log("您已成功觸發事件");
    }
  }
}).mount("#app");

阻止事件冒泡(一般情況)

1
2
3
4
5
6
7

<div id="app">
  <ul @click="clickElement('ul')">
    <li @click="clickElement('li')">
      <button type="button" @click="clickElement('btn')">按鈕</button>
    </li>
  </ul>
</div>


1
2
3
4
5
6
7

Vue.createApp({
  methods:{
    clickElement(item){
      console.log("您已觸發"+item);
    }
  }
}).mount("#app");

stopPropagation(防止向外尋找)

1
2
3
4
5
6
7

<div id="app">
  <ul @click="clickElement('ul')">
    <li @click.stop="clickElement('li')">
      <button type="button" @click="clickElement('btn')">按鈕</button>
    </li>
  </ul>
</div>


1
2
3
4
5
6
7
8

Vue.createApp({
  methods:{
    clickElement(item){
      console.log("您已觸發"+item);
    }
  }
}).mount("#app");
}).mount("#app");

事件偵聽器使用capture(事件由外而內)

1
2
3
4
5
6
7

<div id="app">
  <ul @click.capture="clickElement('ul')">
    <li @click.capture="clickElement('li')">
      <button type="button" @click.capture="clickElement('btn')">按鈕</button>
    </li>
  </ul>
</div>


1
2
3
4
5
6
7

Vue.createApp({
  methods:{
    clickElement(item){
      console.log("您已觸發"+item);
    }
  }
}).mount("#app");

事件偵聽器使用self(只觸發自己)

1
2
3
4
5
6
7

<div id="app">
  <ul @click.self="clickElement('ul')">
    <li @click.self="clickElement('li')">
      <button type="button" @click.self="clickElement('btn')">按鈕</button>
    </li>
  </ul>
</div>


1
2
3
4
5
6
7

Vue.createApp({
  methods:{
    clickElement(item){
      console.log("您已觸發"+item);
    }
  }
}).mount("#app");

事件偵聽器使用once(只觸發一次)

1
2
3
4
5
6
7

<div id="app">
  <ul @click.once="clickElement('ul')">
    <li @click.once="clickElement('li')">
      <button type="button" @click.once="clickElement('btn')">按鈕</button>
    </li>
  </ul>
</div>


1
2
3
4
5
6
7

Vue.createApp({
  methods:{
    clickElement(item){
      console.log("您已觸發"+item);
    }
  }
}).mount("#app");
Vue3 

其他相關