（4）v-on参数问题

最新推荐文章于 2022-09-05 20:52:40 发布
最新推荐文章于 2022-09-05 20:52:40 发布
阅读量86 收藏
点赞数
分类专栏： vue_study
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_44946030/article/details/119283048
版权 
<!DOCTYPE html>
<html>
    <body>
    <div id="app">
        <!-- 没有参数是否带括号都行 -->
      <button @click="btnclick()">按钮1(无参，带括号)</button>
      <button @click="btnclick">按钮2（无参，不带括号）</button>
      <button @click="btn2click()">按钮3（有参，不传带括号）</button>
      <button @click="btn2click">按钮4（有参，不传，不带括号）</button>
        <!-- 会自动传递event对象 -->
        <button @click="btn3click">按钮5（有多个参，不传，不带括号）</button>
        <!-- 将event传给了s,于是监听函数中，s输出为event，真正的event没有被赋值为undefined -->
        <button @click="btn3click(123,$event)">按钮5（有多个参数，传参，带括号）</button>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script> 
        var app=new Vue(
            {el:"#app",
            data:{
                num:1
            },
            methods:{
                btnclick()
                {
                 console.log('没有参数的情况')
                },
                btn2click(s)
                {
                    console.log(s);
                },
                btn3click(s,event)
                {
                   console.log('s:'+s);
                   console.log('event:'+event);
                },
}
})</script>
    </body>
</html>

运行结果：
在这里插入图片描述

慢慢来的小邵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue v-html 参数,vue基础知识详解
weixin_30424427的博客
07-02 3007
步骤：准备一个被vue挂载的容器divnew vue实例对象1.Vue 实例的作用范围？vue会管理el命中的元素及其后代内部的后代元素，注意是内部的可以看出vue 作用范围仅限于el 命中的元素的内部2.是否可以选择其他选择器？可以，但是建议选择id选择器默认选择的是id选择器。那是否可以是其他的选择器呢？可以看得出不管是id选择器还是class选择器或者是标签选择器都是没有发生变化的，所以它可...
Vue事件绑定（v-on用法）
qq_65715980的博客
07-28 3747
ES6事件绑定，v-on的基本使用，v-on的参数传递，v-on的修饰词，阻止冒泡事件，添加事件监听器时使用事件捕获模式。 capture只当在 event.target 是当前元素自身时触发处理函数。 prevent点击事件将只会触发一次。 once .passive 修饰符尤其能够提升移动端的性能。 .passive.........
v-on参数传递
jwz934738949的博客
07-03 4259
v-on可以传递click命令，代表点击事件，简写为@click 点击事件有三种情况：1.无参方法；2.有参方法；3.既需要参数，也需要浏览器产生的event事件 无参方法实现时，可以在调用方法时加入小括号，也可以不加小括号； 当方法有参数时，需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号，默认将浏览器产生的event事件传给方法； 当方法即需要参数,又需要event事件时，必须使用$event才可以返回事件； 当使用event时或者不写时返回undefined； 当
Vue中关于v-on绑定点击事件时候的参数问题
xiaosheng
05-18 6236
v-on的绑定点击事件的时候关于参数有三种情况,分别如下 : 绑定的方法后面没有括号 <button @click="btnClick">点击</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此时event就是当前点击的对象 console.log(event) } } }) </script> 绑定的方.
Vue中v-on的基础用法、参数传递和修饰符
yzq0820的博客
07-29 4012
一、v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。二、v-on的参数传递三、v-on的修饰词.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。.prevent调event.preeventDefault阻止默认行为。.enter监听键盘事件; .onc......
Vue中的v-on
m0_72694993的博客
09-05 4956
1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码 即用@keyup.81和enter效果相同。2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；
v-on指令
fushan2012的博客
02-22 1万+
v-on
Vue - v-on的使用
热门推荐
qq_33962481的博客
07-26 1万+
文章目录一、事件监听 一、事件监听 如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令
【无标题】Vue 之v-on参数传递问题
Yan65919的博客
04-26 1460
Vue 之 v-on参数传递问题
vue元素绑定事件v-on @
jyn15159的博客
12-17 3380
v-on(@) 事件绑定-基本使用 使用v-on给标签绑定事件。 web端网页应用程序开发，事件是一个不可或缺的技术。 在vue中给元素进行事件绑定，需要通过v-on:指令实现，也使用@符号，@是v-on:的简写，使用更方便。 事件类型： 鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等。 键盘事件：onkeyup onkeydown onkeypress 等等。
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
本地应用 v-on补充
01-08
◆事件绑定的方法写成函数调用的形式，可以传入自定义参数 ◆定义方法时需要定义形参来接收传入的实参 ◆事件的后面跟上.... V-on补充 var app = new Vue( { el:#app, methods:{ doit:function(p1,p2){
NTD3055-094T4G的技术参数
12-11
产品型号:NTD3055-094T4G源漏极间雪崩电压VBR(V):60源漏极最大导通电阻rDS(on)(mΩ):94最大漏极电流Id(on)(A):9通道极性:N沟道封装/温度(℃):DPAK 4/-55 ~150描述:60 V, 9.0 A功率MOSFET价格/1片(套):￥2.70 
MAC4DSNT4G的技术参数
12-10
产品型号:MAC4DSNT4G断态重复峰值电压VDRM(Max)(V):800反向重复峰值电压VRRM(Max)(V):800额定正向平均电流IF(Max)(A):4门极触发电流IGT(Max)(mA):10门极触发电压VGT(Max)(V):1.300封装/温度(℃):DPARK/-40~125价格/1...
zx-du99d4-1.12通用鸡血BIOS
02-26
zx_du99d4_1.12BIOS鸡血
关于Windows 9x的vmm32问题解决方法
最新发布
06-15
关于Windows 9x的vmm32问题解决方法
Linux下用sdcc开发51单片机，该示例是中断处理程序.zip
06-15
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
施工作业人员配备与人员资格及职责分工表.docx
06-15
施工作业人员配备与人员资格及职责分工表.docx
Tangram-ES 0.17.1 64位 Debug/Release版 基于OpenGL地图渲染引擎
06-15
Tangram-ES 0.17.1 基于OpenGL ES地图渲染引擎 编译环境为Windows 10 Pro 22H2 + VS2022 + vcpkg 包管理器 编译结果包含64位 Windows平台 Release/Debug版 引擎使用imgui界面库显示地图瓦片，使用OpenGL ES库渲染画面
vue v-on:click 动态参数传递
05-01
v-on:click 动态参数传递是指可以根据组件的具体需求，在触发 click 事件时传递不同的参数。这样可以增强组件的灵活性和复用性。 在 Vue 中，我们可以通过以下方式来实现 v-on:click 动态参数传递： 1. 使用方法调用 通过调用方法来传递参数是最常用的方式。我们可以在方法中定义需要传递的参数，然后在模板中调用方法并传递参数。例如： ```html <template> <button @click="handleClick('hello')">点击我</button> </template> <script> export default { methods: { handleClick(text) { console.log(text) } } } </script> ``` 2. 使用 $event 对象 $event 是 Vue 在事件触发时自动传递的一个参数，它可以获取到当前事件的信息，比如鼠标的位置等。在传递动态参数时，我们可以通过 $event 对象来传递额外的参数。例如： ```html <template> <button @click="handleClick('hello', $event)">点击我</button> </template> <script> export default { methods: { handleClick(text, event) { console.log(text, event) } } } </script> ``` 3. 使用 bind 方法 通过 bind 方法可以将参数绑定到特定的函数中。例如： ```html <template> <button @click="handleClick.bind(this, 'hello')">点击我</button> </template> <script> export default { methods: { handleClick(text) { console.log(text) } } } </script> ``` 总之，通过 v-on:click 动态参数传递，我们可以更加灵活地对组件进行设置，既可以传递静态参数，也可以通过方法调用、$event 对象、bind 方法等方式传递动态参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值