Vue

您所在的位置：网站首页 › 点击事件onclick传参数 › Vue

Vue

2023-04-05 12:47| 来源: 网络整理| 查看: 265

Vue--click事件传递参数--方法/教程/实例原创

IT利刃出鞘 2022-02-15 16:52:29 博主文章分类：Vue ©著作权

文章标签 vue.js javascript 前端 html 自定义文章分类代码人生

©著作权归作者所有：来自51CTO博客作者IT利刃出鞘的原创作品，请联系作者获取转载授权，否则将追究法律责任

简介

说明

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

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

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

官网

事件处理 — Vue.js

只传自定义参数 this is title 点我Vue.config.productionTip = false let vm = new Vue({ el: '#app', methods: { clickHere: function (param1) { console.log("参数："); console.log(param1); } } })

结果

Vue--click事件传递参数--方法/教程/实例_前端

只传事件参数

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

this is title 点我 Vue.config.productionTip = false let vm = new Vue({ el: '#app', methods: { clickHere: function (e) { console.log("事件："); console.log(e); } } })

结果

Vue--click事件传递参数--方法/教程/实例_javascript_02

传事件和自定义参数 this is title 点我Vue.config.productionTip = false let vm = new Vue({ el: '#app', methods: { clickHere: function (event, param1) { console.log("事件："); console.log(event); console.log("参数："); console.log(param1); } } })

结果

Vue--click事件传递参数--方法/教程/实例_vue.js_03

动态参数（从局部取值） this is title 点我 Vue.config.productionTip = false 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 }] } })

结果

Vue--click事件传递参数--方法/教程/实例_html_04

动态参数（从全局数据取值） this is title 点我Vue.config.productionTip = false let vm = new Vue({ el: '#app', methods: { clickHere: function (param1) { console.log("参数："); console.log(param1); } }, data: { message: "hello world" } })

结果

Vue--click事件传递参数--方法/教程/实例_自定义_05

赞收藏评论分享举报

上一篇：Java多线程--内存模型(JMM)--详解

下一篇：Java多线程--ReentrantLock--使用/实例/原理

【本文地址】

Vue

Vue

今日新闻

推荐新闻