vue事件参数

事件参数

事件参数可以获取event对象和通过事件传递数据
获取event对象

bash 复制代码
<template>
<button
 @click="addCount">点击</button>
 <p>count is: {{ count }}</p>
 <p>{{ coutent_e }}</p>
</template>
<script>

export default{
    data(){
        return{
      count:0,
      coutent_e:'',
        }
    },
    methods: {
        addCount(e) {
            this.coutent_e=e;
             this.count++
    }
}
}

</script>

当点击后触发事件:


事件传参

bash 复制代码
<template>
<h3>事件传参</h3>
<p @click="showName(name)" v-for="(name,index) in names" :key="index">{{ index+1 }}--{{name}}</p>

</template>
<script>

export default{

data(){
    return{
names:["张三","李四","王五"]
    }
},
methods:{
    showName(name){
        console.log("点击标签:"+name)
    }
}
}

</script>

运行结果:

目的:点击事件进行传参

传递参数过程获取event

bash 复制代码
<template>
<h3>事件传参</h3>
<p @click="showName(name,$event)" v-for="(name,index) in names" :key="index">{{ index+1 }}--{{name}}</p>

</template>
<script>

export default{

data(){
    return{
names:["张三","李四","王五"]
    }
},
methods:{
    showName(name,e){
        console.log("点击标签:"+name+ "  e: "+e)
    }
}
}

</script>

运行结果:

相关推荐
古一|14 分钟前
vue3都有哪些升级相比vue2-核心响应式系统重构
javascript·vue.js·重构
HHHHHY15 分钟前
http接口响应头类型不对,导致svg图片无法预览,前端解决方案
前端·javascript
Komorebi゛25 分钟前
【React】配置别名路径
前端·react.js·前端框架
风语者日志28 分钟前
CTFSHOW WEB 3
前端
元亓亓亓41 分钟前
考研408--组成原理--day1
开发语言·javascript·考研·计组
普通码农1 小时前
uni.setClipboardData在 iOS 剪贴板复制失败解决方案
前端
_孤傲_1 小时前
webpack实现常用plugin
前端·webpack·node.js
golang学习记1 小时前
从0死磕全栈之Next.js 字体优化实战:零布局偏移、高性能、隐私友好的字体加载方案
前端
zachhere1 小时前
深入了解 OpenAI Apps SDK 的内部机制
前端