vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue click事件传递参数

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

作者:IT利刃出鞘

这篇文章主要介绍了Vue click事件传递参数--方法/教程/实例,本文用示例介绍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事件传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文