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

目录
  • 简介
  • 只传自定义参数
  • 只传事件参数
  • 传事件和自定义参数
  • 动态参数（从局部取值）

简介

说明

        本文用示例介绍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事件传递参数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue 组件事件触发和监听实现源码解析

    目录 正文 Vue 的事件触发和监听 源码分析 on once emit off 动手实现 总结 正文 通常我们在使用Vue的时候,会使用$emit和$on来触发和监听事件,但是有没有思考是如何实现的呢? 今天带来的是一个微型的事件触发的库,借它们的源码来简单初步了解Vue的事件触发和监听的实现. mitt tiny-emitter mitt使用TypeScript编写,tiny-emitter使用原生ES5编写,两者对比tiny-emitter功能稍微丰富一写,所以直接看tiny-emitte

  • vue中可以绑定多个事件吗

    目录 vue可以绑定多个事件吗 第一种 第二种 vue事件绑定的原理 1.1 原生 dom 的绑定 1.2 组件中绑定事件 1.3 $on 是怎么实现的 vue可以绑定多个事件吗 标签绑定一个事件处理函数,然后在相应的事件处理函数中调用想要触发的多个处理函数 以下两种方案,都可以实施 第一种 <button id="test" @click="test1">按钮</button> new Vue({     el:"#test&qu

  • vue项目如何实现Echarts在label中获取点击事件

    目录 vue Echarts在label中获取点击事件 vue echarts图表点击事件 柱状图 vue Echarts在label中获取点击事件 需要针对Echarts图像对label添加点击事件,一开始设置如下代码: <template> <div id="bar-echart" ref="barEchartDom" /> </template> <script> import * as echarts from

  • vue中如何给el-table-column添加指定列的点击事件

    嗨害嗨,我又来了奥.大家在工作中用组件吗?elementUI应该都用过吧, element是一套UI组件库,是由国内饿了么团队开发的.它提供了丰富的PC组件,有效地降低了使用者的开发难度. 如果工作中遇到了表格,我们经常会用el-table组件来写表格,这样写出来的表格样式更美好.现在,提出需求,如果表格有某一列具有其对应的详情页,点击这一列的单项,跳转到其对应的详情页,该怎么做?那我们是不是先配一下详情页的路由呀,一般在跳转的时候,都会传个某某id,作为唯一标识,就知道传的是哪个了.然后详情页

  • vue中的事件触发(emit)及监听(on)问题

    目录 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 案例 vue emit事件无法触发问题 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 1.使用 $on(eventName,callback) 监听事件 2.使用 $emit(eventName,[…args]) 触发事件 $emit 和 $on 必须都在实例上进行触发和监听. // on监听emit触发的事件 created:function(){     this.$on('e

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-

  • Vue如何给组件添加点击事件 @click.native

    目录 给组件添加点击事件 @click.native 问题 结论 vue中@click.native使用 @click.native是给组件绑定原生事件 给组件添加点击事件 @click.native 问题 毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效. 我尝试在组件中添加点击事件,点击图片,控制台输出1. 结果是可以实现的. 结论 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自It

  • Vue Element-ui 键盘事件失效的解决

    目录 Element-ui 键盘事件失效 按键修饰符 使用element-ui时监听登录界面全局键盘回车事件 方法一 方法二 Element-ui 键盘事件失效 按键修饰符 vue中提供了一些按键修饰符,开发者可以直接通过按键修饰符捕捉键盘事件 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 例如:.enter <!-- 只有在 `key` 是

  • 关于javaScript注册click事件传递参数的不成功问题

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限.柜员类型权限.岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制.造成了这一功能模块的实现上javaScript代码比java代码负责的情况. 而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实

  • Vue.js 事件修饰符的使用教程

     一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作. 仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives  二.干货合集

  • Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

  • python调用jenkinsAPI构建jenkins，并传递参数的示例

    python调用jenkinsAPI构建jenkins，并传递参数的示例

    安装jenkins 安装jenkins很简单,可以用多种方式安装,这里知道的有: 在官网下载rpm包,手动安装,最费事 centos系统通过yum安装,ubuntu通过apt-get安装(不推荐,因为很多东西都使用了默认的) 直接下载官网上的war包 我这里直接用的下载war包 遇到的坑 在安装之前,公司的服务器上已经有一个版本的jekins在运行了,所有参数都已经被设置过了,所以,重新安装的版本,虽然文件夹,用户都和以前的版本不一样,但是每次jenkins页面都是直接跳转上个版本的,并不会进入

  • Vue中mapMutations传递参数方式

    目录 通过子组件定义的方法传递参数 在…mapMutations引用 当然也可以写直接传递 关于mapMutations的作用 通过子组件定义的方法传递参数 在…mapMutations引用 不多逼逼,看代码! store文件中: import Vuex from 'vuex'; import Vue from 'vue'; Vue.use(Vuex); let store = new Vuex.Store({     state: {         name: 'hahahah',    

  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

  • thinkPHP中U方法加密传递参数功能示例

    本文实例讲述了thinkPHP中U方法加密传递参数功能.分享给大家供大家参考,具体如下: thinkPHP中的U方法用于对URL地址进行组装.可自动根据当前的URL模式和设置生成对应的URL地址.基本使用可参考 //www.jb51.net/article/51057.htm 具体代码如下: <?php /** * 简单对称加密算法之加密 * @param String $string 需要加密的字串 * @param String $skey 加密EKY */ function encode(

  • Python进程，多进程，获取进程id，给子进程传递参数操作示例

    Python进程，多进程，获取进程id，给子进程传递参数操作示例

    本文实例讲述了Python进程,多进程,获取进程id,给子进程传递参数操作.分享给大家供大家参考,具体如下: 线程与线程之间共享全局变量,进程之间不能共享全局变量. 进程与进程相互独立  (可以通过socket套接字实现进程间通信,可以通过硬盘(文件)实现进程通信,也可以通过队列(Queue)实现进程通信) 子进程会拷贝复制主进程中的所有资源(变量.函数定义等),所以子进程比子线程耗费资源. demo.py(多进程): import threading # 线程 import time impo

  • IE的事件传递-event.cancelBubble示例介绍

    关于event.cancelBubble,由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件. 例子: 复制代码 代码如下: <html> <body> <table border=&

  • JS中touchstart事件与click事件冲突的解决方法

    前言 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容,下面话不多说了,来一起看看详细的介绍吧. 一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 cl

随机推荐