v-on参数传递问题

最新推荐文章于 2022-11-10 17:35:07 发布
最新推荐文章于 2022-11-10 17:35:07 发布
阅读量624 收藏
点赞数 1
分类专栏： Vuejs 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vfjcgg/article/details/106598672
版权

v-on参数传递问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题。
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.事件调用的方法没有参数 -->
        <button @click="btn1Click()">按钮1</button>
        <button @click="btn1Click">按钮1</button>

        <button @click="btn2Click(123)">按钮2</button>
        <!-- 2.如果函数需要参数，但是没有传入，那么函数的形参为undefined -->
        <button @click="btn2Click()">按钮3</button>
        <!-- 在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的,这个时候，
          Vue会默认将浏览器生成的event事件对象作为参数传入到方法 -->
        <button @click="btn2Click">按钮4</button>
        <!-- 3.在方法定义时，我们需要event对象，同时又需要其他参数 -->
        <button @click="btn3Click">按钮5</button>
        <!-- 在调用方法时，如何手动的获取到浏览器参数的event对象：$event -->
        <button @click="btn3Click(123,$event)">按钮6</button>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                btn1Click() {
                    console.log('btn1Click');
                },
                btn2Click(event) {
                    console.log('------------', event);
                },
                btn3Click(abc, event) {
                    console.log('++++++++++', abc, event);

                }
            }
        })
    </script>
</body>

</html>
Eli-sun
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nats-pure.rb:用于 NATS 的 Ruby 客户端，云原生消息传递系统
05-29
NATS - 纯 Ruby 客户端 用纯 Ruby 编写的用于线程安全客户端。 入门 gem install nats-pure 从版本开始，您还可以选择安装以使用新的 NATS v2.0 身份验证功能： gem install nkeys 基本用法 require 'nats/io/client' nats = NATS :: IO :: Client . new nats . connect ( "demo.nats.io" ) puts "Connected to #{ nats . connected_server } " # Simple subscriber nats . subscribe ( "foo.>" ) { | msg , reply , subject | puts "Received on ' #{ subject } ': ' #{ msg } '" }
latex-on-http：通过HTTP API编译Latex文档
02-03
HTTP上的LaTeX 通过HTTP API编译LaTeX文档。 请参阅对HTTP上LaTeX的。 打开Alpha @ latex.ytotech.com 可在上以开放Alpha形式获得。 该Alpha面向所有人开放，以测试API，收集尽可能多的反馈并帮助开发服务。 欢迎反馈！ 给我邮件 尝试交互式演示： : 注意 如上所述，API可能会随之改变。 直到API稳定之前，在发布更改之前不会有任何特殊通知。 入门 Hello world GET Querystring API（实验性） 您可以传递LaTeX文档以在content GET参数中进行编译： 您还可以使用url参数通过url传递文档： 可以使用编译compiler参数指定LaTeX编译compiler ： 当您需要添加附件资源（例如其他LaTeX文件或图像文件）时，可以使用resource-path[] ， resource-value[]和resource-type[]参数指定它们： Hello world POST Json API 带卷曲： curl -v -X POST https://late
Vue中v-on的基础用法、参数传递和修饰符
yzq0820的博客
07-29 3917
一、v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。二、v-on的参数传递三、v-on的修饰词.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。.prevent调event.preeventDefault阻止默认行为。.enter监听键盘事件; .onc......
v-on参数的传递
Mr_xiaoxuboke的博客
05-24 438
1.如果需要传参，在页面中传的是实参，在methods中写的是形参 打印的是实参 2.如果在页面中没有写实参但是有括号，在methods中写了形参，会打印undefined 3.如果在页面中没有写实参也没有括号，在methods中写了形参，会打印event事件 4.如果想同时传事件和参数，就要传两个参数，第一个写$event,第二个是参数 5.如果只传事件，那么在页面中可以完全不写括号 打印的也是event事件 代码如下：...
关于父组件通过v-on接收子组件多个参数的一点研究
weixin_34360651的博客
12-19 104
写组件的时候遇到一个需求，我需要在子组件向父组件传递信息 this.$emit('myEvent', 信息1, 信息2) 在父组件使用v-on来接收 &lt;my-component @myEvent="handler"/&gt; 这样就可以接收到子组件传递的信息1和信息2，easy。 handler(param1, param2){ console.log(para...
v-on参数传递
jwz934738949的博客
07-03 4248
v-on可以传递click命令，代表点击事件，简写为@click 点击事件有三种情况：1.无参方法；2.有参方法；3.既需要参数，也需要浏览器产生的event事件 无参方法实现时，可以在调用方法时加入小括号，也可以不加小括号； 当方法有参数时，需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号，默认将浏览器产生的event事件传给方法； 当方法即需要参数,又需要event事件时，必须使用$event才可以返回事件； 当使用event时或者不写时返回undefined； 当
v-on的基本使用与参数问题
weixin_54327001的博客
11-10 181
按钮4}event显示defined，abc显示event如果直接写作按钮4
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui组件中input等的change事件中传递自定义参数
12-29
以select为例，如果select写在循环里，触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。 下面这样写是无效的： @change=changeStatus(val, index) <div v-...
PT80-NEAT开发指南v1.1
06-24
V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册..........................................................................................................................
v-on传递参数的问题
shimily_liu的博客
06-08 387
v-on传递参数的问题 关于v-on的参数，详解如下： 代码如下： <button v-on:click="aaa()">+</button> <button v-on:click="bbb()">-</button> <button @click="ccc(222)">~</button> <button @click="fff(event)">#</button> &l
vue中v-on的参数问题
Firoly的博客
02-24 9604
vue中v-on:clock的使用最近在学习vue.js框架。记下其中遇到的一些问题，以便以后查阅。 首先，这是一个页面(为了便于观察，将各个标签都一一着色)： 其中html代码：<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="page
v-on的使用（参数、标识符）
407指导员
12-11 396
v-on v-on基本使用 <body> <div id="app"> <h1>{{counter}}</h1> <button v-on:click="increment">+</button> <!--语法糖直接用@代替v-on:--> <button @click="decrement">-</button> </div> <script src="../js/vu
7、v-on事件函数中传入参数
code_dream_wq的博客
11-26 467
1、v-on:click='handle1' ：如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 handle1: function(event) { console.log(event.target.innerHTML) } 2、handle2(123, 456, $event) ：如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event <!DO...
v-on的参数问题
Dawn_cl的博客
05-23 101
v-on的参数问题 如果事件调用方法不需要参数，方法后的（）可以不写 如果定义时省略了小括号，但是方法本身需要一个参数，会默认将原生事件even参数t传进去 如果需要其他参数，同时也需要event对象，可以通过$event传递 <div id="app"> <!-- 1.事件调用方法不需要参数 --> <button @click="btn1Click">按钮1</button> <button @click="btn1Click(
Vue中v-on:click怎么传递参数获取到当前元素
热门推荐
到得还来别无事，庐山烟雨浙江潮。
05-05 2万+
//原生js //this指向当前元素 在onclick = "fn(this)" //Vue中使用方法 v-on:click="fn($event)" methods: { fn: function (e) { // 当前元素 e.currentTarget; } } vue动态绑定样式利用三元运算符 //在需要的html标...
vue中使用v-on绑定一个方法的参数传递问题
webchang的博客
01-13 1182
当通过methods中定义方法，以供@click调用时，需要注意参数问题
Vue中关于v-on绑定点击事件时候的参数问题
xiaosheng
05-18 6212
v-on的绑定点击事件的时候关于参数有三种情况,分别如下 : 绑定的方法后面没有括号 <button @click="btnClick">点击</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此时event就是当前点击的对象 console.log(event) } } }) </script> 绑定的方.
VUE框架学习第四天
qq_45870928的博客
05-25 60
1.v-on的基础使用 <div id="app"> <h2>{{count}}</h2> <button @click="add()">+</button> <button @click="sub()">-</button> </div> <script src="./vue.js"></script> &l
vue v-on:click 动态参数传递
最新发布
05-01
v-on:click 动态参数传递是指可以根据组件的具体需求，在触发 click 事件时传递不同的参数。这样可以增强组件的灵活性和复用性。 在 Vue 中，我们可以通过以下方式来实现 v-on:click 动态参数传递： 1. 使用方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值