vue如何绑定多个不同修饰符的click

最新推荐文章于 2022-04-08 18:02:25 发布
最新推荐文章于 2022-04-08 18:02:25 发布
阅读量928 收藏
点赞数 1
分类专栏： vue js 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38409915/article/details/112257270
版权
vue 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

问题描述： 

<input v-on:click.ctrl="SelectedMultiple(item.id)" v-on:click="Selected(item.id)" />

 按住ctrl点击鼠标时，在触发SelectedMultiple之后会再次触发Selected事件。

解决方案：

每个v-on会有一个独立的handler事件，触发的时候是放在一个数组里依次执行的相互之间并不会影响。@click.ctrl不能阻止@click的执行，所以只能在@click事件前，对$event进行判断来过滤掉ctrl事件。

<input v-on:click.ctrl="SelectedMultiple(item.id)" v-on:click="!$event.ctrlKey&&Selected(item.id)" />
Zhsh-7
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）
我是一只蘑菇17的博客
11-26 3508
1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）   v-on:click="fun"   @click="fun"   @click="fun(参数)" <button @click="test1">test1</button>  <button @click="test2('abc')">test2&...
VUE3 click 点击事件及修饰符
God's asylum的博客
07-18 1万+
VUE3 click点击事件及修饰符
vue中给多个按钮动态添加类名
weixin_45609659的博客
04-08 1181
点击按钮，切换高亮背景 <button @click="btnClick(1)" :class="{ active: btnNum === 1 }">日</button> <button @click="btnClick(2)" :class="{ active: btnNum === 2 }">日累计</button> <button @click="btnClick(3)" :class="{ active: btnNum === 3 }">
vue事件，自定义参数及事件修饰符和按键修饰符
qq_37550440的博客
02-05 173
<template> <div> <p> {{number}} </p> <button @click="add1">+1</button> <!-- 有自定义参数时，我们如何传递envent ,自定义参数 --> <button @click="add2(2 ,$event)">+2</button> </div> </templat.
vue click事件传参数_深入理解 Vue 的 .sync 修饰符
weixin_39617502的博客
11-25 398
Vue 中在某些情况下需要用到数据的双向绑定，但如果实现真正的双向数据绑定会给代码维护带来一定的困难，会引起父子组件都以更改数据容易混乱Vue 使用 `update:myPropName` 的模式触发事件取而代之基础例子Child.vue<App.vue<<Child :childNumber="parentNumber" v-on:update:childNumber="par...
vue事件修饰符和按键修饰符用法总结
12-03
1. `.prevent`：这个修饰符用于调用 `event.preventDefault()`，阻止浏览器的默认行为。例如，表单提交时通常会页面跳转，使用 `.prevent` 可以阻止这种跳转。 ```html <!-- 表单内容 --> ``` 2. `.stop`：此...
vue事件修饰符.docx
11-22
例如，在一个按钮点击事件中，我们可以使用 `.stop` 修饰符来阻止事件传播到父级元素，避免触发多个事件处理函数。 示例代码： ```html <button @click.stop="handleClick">点击我 ``` 在上面的示例中，当按钮被...
探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示
最新发布
06-20
除了以上的基本修饰符，Vue 还提供了组合修饰符，如 `.stop.prevent`，这样可以同时应用多个修饰符。 在实际开发中，结合 `v-on` 和事件修饰符，我们可以实现各种复杂的交互逻辑，提高代码的可读性和可维护性。例如...
对Vue.js之事件的绑定(v-on: 或者 @ )详解
10-18
Vue还允许你绑定多个事件，例如： ```html <element v-on:click='handler1' v-on:mouseout='handler2' v-on:mouseover='handler3'> ``` 2. **Vue.js事件绑定的实现** 在实现事件绑定时，首先需要在JavaScript中...
一个vue项目实战简单的案例.zip
02-29
- **组件的生命周期**：Vue组件有多个生命周期钩子，如`created`、`mounted`、`updated`，用于在特定阶段执行相应操作。 10. **部署与优化** - **打包与部署**：使用`npm run build`将项目打包成生产环境版本，...
Vue修饰符
xxx
03-15 1463
.stop .prevent .self .capture .once .passive
VUE 修饰符
m0_55240753的博客
09-13 810
一、事件修饰符 1、@click.stop和原生js的event.stopPropagation()一样，都是阻止冒泡的，当一个元素有且只有它一个的时候看不出效果，当该元素存在父元素时就能看出来了，如下： // 当有且只有一个元素时 点击打印只会出现一行结果（用原生写的） <div onclick="child"></div> <script> function child(){ console.log("你点击了子元素") } </
德国Vue.js2终极开发教程（含Vue路由和Vuex）
03-08
新手入门现代前端开发的不二选择课程目标：* 学会从简单到复杂企业级应用的VueJS程序编写方法* 能在单页和多页应用中自如使用VueJS* 真正理解VueJS的背后原理，并在真实项目中应用它们授课计划：23章节，21小时，341个视频，11个练习，3个工程实践；新VueJS 2.x版本，课程随版本升级。
vue为同一个元素绑定多个事件以点击事件为例的写法
qq_41973526的博客
01-05 989
vue为同一个元素绑定多个事件：如点击事件为例
vue事件修饰符详解
KnifeBlade的博客
06-22 2万+
        vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个：（１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）                        点击内层div的结果：                                            点击外层div的结果：            ...
vue2.0修饰符常用得几个
qq_38935512的博客
09-09 133
修饰符说明 颜色加深得是我认为项目中用得比较躲得 事件修饰符 使用 作用说明 stop @click.stop=“” 阻止单击事件冒泡 prevent @submit.prevent 表单提交不重新重载页面 capture @click.capture 先处理自身触发得事件，再传递事件下去 self @click.self=“” 只处理自身得事件，不触发事件委托 p...
Vue中v-model结合修饰符的使用
qq_41138726的博客
11-17 572
lazy修饰符: 默认情况下, v-model默认是在input事件中同步输入框的数据的。 也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变 lazy修饰符可以让数据在失去焦点或者回车时才会更新; number修饰符: 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符申类型进行处理 但是如果我们希望处理的是数字类型,那么最好直按将内容当做数字处理。 number修饰符可以让在输入框中输入的内容自动转成数字类型 trim修饰符: 如果输入的内容..
vue事件绑定中的事件修饰符
ly_fashion的博客
03-20 1677
vue.js事件修饰符
Vue v-for循环之@click点击事件获取元素
热门推荐
信徒博客
03-28 4万+
应用背景 浏览论坛的贴子（数据库的数据通过vue遍历在html页面上） 点击帖子的标题、图片，可以查看详细的帖子（点击事件获取id） 1、设置一个隐藏值的放置Id的div，点击div就获取id，传参到后台（点击一部分） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
vue click多个修饰符
04-17
好的，对于你的问题，我可以给出以下答案：在 Vue 中，可以通过以下方式实现多个点击事件修饰符的绑定： ```vue <template> <button v-on:click.stop.prevent="doThis"></button> </template> ``` 在这个示例中，`.stop` 修饰符调用 `event.stopPropagation()` 方法阻止事件冒泡，`.prevent` 修饰符调用 `event.preventDefault()` 方法阻止默认事件行为。 希望这个回答能够解决您的问题，如果还有其他问题，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值