vue事件参数 - 技术栈

vue事件参数

阿垚啊2024-07-09 0:36

事件参数

事件参数可以获取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>

运行结果：