Vue click事件传递参数的示例教程
作者：IT利刃出鞘
这篇文章主要介绍了Vue click事件传递参数--方法/教程/实例,本文用示例介绍Vue中事件传参的方法，采用click这个事件进行展示，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
简介
说明
本文用示例介绍Vue中事件传参的方法。
Vue的事件用法为：v-on:click="xxx"。可以用@click="xxx"来简写。
本处采用click这个事件进行展示，其他的事件也是一样的。
官网
只传自定义参数
<!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事件传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！