Vue click事件传递参数的示例教程

Vue click事件传递参数 Vue click事件 vue传递参数 2022-12-08 20:12:26 482人浏览独家记忆

摘要

目录简介只传自定义参数只传事件参数传事件和自定义参数动态参数（从局部取值）简介说明本文用示例介绍Vue中事件传参的方法。

简介

说明

本文用示例介绍Vue中事件传参的方法。

Vue的事件用法为：v-on:click="xxx"。可以用@click="xxx"来简写。

本处采用click这个事件进行展示，其他的事件也是一样的。

官网

事件处理 — vue.js

只传自定义参数

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere('hello')">点我</button>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("参数：");
                console.log(param1);
            }
        }
    })
</script>
 
</body>
</html>

结果

只传事件参数

不指定参数时，默认会传递事件。当然也可以通过$event来传递事件。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere">点我</button>
    <!--等价于下边这个-->
    <!--<button @click="clickHere($event)">点我</button>-->
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (e) {
                console.log("事件：");
                console.log(e);
            }
        }
    })
</script>
 
</body>
</html>

结果

传事件和自定义参数

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere($event, 'hello')">点我</button>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (event, param1) {
                console.log("事件：");
                console.log(event);
                console.log("参数：");
                console.log(param1);
            }
        }
    })
</script>
 
</body>
</html>

结果

动态参数（从局部取值）

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <div v-for="hero in heros">
        <button @click="clickHere(hero.name)">点我</button>
    </div>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("参数：");
                console.log(param1);
            }
        },
        data: {
            heros: [{
                name: "Iron Man",
                age: 30
            }, {
                name: "Captain America",
                age: 40
            }]
        }
    })
</script>
 
</body>
</html>

结果

动态参数（从全局数据取值）

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere({message})">点我</button>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("参数：");
                console.log(param1);
            }
        },
        data: {
            message: "hello world"
        }
    })
</script>
 
</body>
</html>

结果

其他网址

vue click同时传入事件对象和自定义参数

到此这篇关于Vue click事件传递参数--方法/教程/实例的文章就介绍到这了,更多相关Vue click事件传递参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue click事件传递参数的示例教程

本文链接: https://www.lsjlt.com/news/174472.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue click事件传递参数的示例教程

目录简介只传自定义参数只传事件参数传事件和自定义参数动态参数（从局部取值）简介说明本文用示例介绍Vue中事件传参的方法。 ...

99+

2022-12-08

Vue click事件传递参数 Vue click事件 vue传递参数
Angularjs如何为ng-click事件传递参数

这篇文章给大家分享的是有关Angularjs如何为ng-click事件传递参数的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。在angularjs开发中，我们需要为ng-click...

99+

2022-10-19
vue中路由参数传递的示例分析

这篇文章主要为大家展示了“vue中路由参数传递的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中路由参数传递的示例分析”这篇文章吧。首先我的路由的...

99+

2022-10-19
vue嵌套路由-query传递参数的示例分析

这篇文章主要介绍了vue嵌套路由-query传递参数的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。在嵌套路由中我们经常会遇到父路由...

99+

2022-10-19
mybatis的association传递参数问题示例

单个参数直接传即可，多参数传递如下 <resultMap id="stationVo" type="com.gt.dev.domain.vo.DevStationVO" ext...

99+

2022-12-14

mybatis的association传递参数 mybatis association参数
PythonFastAPI多参数传递的示例详解

目录Python FastAPI请求参数传递FastAPI多参数传递类型路径多参数传递GET请求多参数传递POST请求多参数传递案例完整代码案例完整测试启动服务访问测试GET请求多参...

99+

2022-12-15

Python FastAPI 多参数传递 Python FastAPI Python 参数传递
vue select change事件如何传递自定义参数

目录select change事件传递自定义参数@change函数传自定义参数实例select change事件传递自定义参数今天记录一个小问题，最近get到的一个方法，不太常用，...

99+

2022-11-13
vue嵌套路由中params传递参数的示例分析

这篇文章主要介绍vue嵌套路由中params传递参数的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在嵌套路由中，父路由向子路由传值除了query外，还有params，par...

99+

2022-10-19
vue组件之间数据传递的示例分析

小编给大家分享一下vue组件之间数据传递的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！（1）props属性：在父组件中，可以通过子组件标签属性的形式将数据或者函数传给子组件，子组...

99+

2022-10-19
微信小程序点击事件（bindtap）传递参数

小程序在组件上绑定事件后，传递参数的方式不同于前端开发其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下： wxml: ...

99+

2023-09-20

微信小程序小程序
SpringBoot与SpringMVC中参数传递的示例分析

小编给大家分享一下SpringBoot与SpringMVC中参数传递的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一:普通参数与基本注解HandlerM...

99+

2023-06-20
JavaScript中参数按值传递的示例分析

小编给大家分享一下JavaScript中参数按值传递的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！定义ECMAScri...

99+

2022-10-19
JS中函数参数传递与同名参数的示例分析

这篇文章主要为大家展示了“JS中函数参数传递与同名参数的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS中函数参数传递与同名参数的示例分析”这篇文章吧...

99+

2022-10-19
vue跳转页面并且实现参数传递接受示例

目录vue跳转页面及参数的传递接受一、页面跳转、传递参数二、接收参数vue跳转页面及参数的传递接受要实现一个功能：从页面A跳转到页面B，并且页面A的参数要传递到页面B，B使用传过来...

99+

2022-11-13
Vue中子组件与数据传递的示例分析

小编给大家分享一下Vue中子组件与数据传递的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！如何传递父组件向子组件在进行传...

99+

2022-10-19
Spring MVC文件配置以及参数传递示例详解

web.xml文件配置创建好一个SpringMVC项目后，需要在需要在WB-INF文件夹下配置web.xml文件 <?xml version="1.0" enc...

99+

2022-11-11
React中onClick传递参数问题的示例分析

这篇文章给大家分享的是有关React中onClick传递参数问题的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。背景说明在下图这样的列表中，点击删除按钮需要执行删除操作列表产生：{...

99+

2023-06-25
Vue中click事件防抖和节流处理的示例分析

小编给大家分享一下Vue中click事件防抖和节流处理的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！函数防抖定义：多次...

99+

2022-10-19
C语言之函数返回值与参数传递案例教程

C语言函数返回值与参数传递一：参数传递 C语言的函数中必不可少的就是参数传递，可以采用传值和传指针两种方式。 1.传值的形式：只是将参数值的拷贝传给函数，并非参数本体如： in...

99+

2022-11-12
基于SSIS事件向上传递的示例分析

这篇文章主要介绍了基于SSIS事件向上传递的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。在SSIS中，Package是Task组件...

99+

2022-10-18