vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > VUE3 click点击事件及修饰符

VUE3 click点击事件及修饰符详解

作者:GIS-CL

这篇文章主要介绍了VUE3 click点击事件及修饰符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

只绑定一个点击事件

<button @click="greet">单个点击事件</button>
methods:{
        greet(){
            console.log('单个点击事件')
        }
    }

一个标签内绑定多个点击事件方法

<button @click="one($event), two($event)">多个点击事件</button>
methods:{
        one(e){
            console.log(e)
        },
        two(e){
            console.log(e)
        }
    }

事件修饰符

.stop 阻止单击事件继续冒泡(适用于出现嵌套点击事件时)

<div @click="box('我是大box')" style="width:500px; background:red">
    <button @click.stop="doThis('我是内嵌点击事件按')">单个点击事件</button>
 </div>
 methods:{
        doThis(val){
            console.log(val)
        },
        box(val){
            console.log(val)
        }
    }

.prevent 阻止默认事件

<form action="">
    <!-- 默认提交事件 -->
    <!-- <input type="submit" value="提交"> -->
    <!-- 阻止默认事件 -->
    <input type="submit" value="提交" @click.prevent="submitCLICK('prevent阻止默认事件')">
  </form>
methods:{
        submitCLICK(val){
            console.log(val)
        }
    }

.capture 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理

<form action="">
    <input type="submit" value="提交" @click.capture="submitCLICK('capture先在此处理')">
  </form>
methods:{
        submitCLICK(val){
            console.log(val)
        }
    }

.once点击事件将只会触发一次

<button @click.once="ononce('点击事件将只会触发一次')">点击事件将只会触发一次</button>
methods:{
        ononce(val){
            console.log(val)
        }
    }

.passive用在移动端的scroll事件,来提高浏览器响应速度,提升用户体验

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,   -->
<div @scroll.passive="onScroll">...</div>

修饰符串联使用(按循序执行)

// 按循序执行先执行阻止冒泡事件在执行阻止默认事件
<a @click.stop.prevent="doThat"></a>

TIP

不要把 .passive 和 .prevent(阻止默认事件) 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。

请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

Vue 为最常用的键提供了别名:

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` 按enter键执行 -->
<input @keyup.enter="submit" />
<!-- 按delete 键执行 -->
<input @keyup.delete="submit" />

系统修饰键

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

<!-- Ctrl + Click 按住加点击时触发-->
<div @click.ctrl="doSomething">Do something</div>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文