vue事件参数

news/2024/7/16 5:44:02 标签: vue.js, javascript, 前端

事件参数

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

<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>

当点击后触发事件:
在这里插入图片描述
在这里插入图片描述
事件传参

<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

<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>

运行结果:
在这里插入图片描述


http://www.niftyadmin.cn/n/5542906.html

相关文章

XLSX + LuckySheet + LuckyExcel + Web Worker实现前端的excel预览

文章目录 功能简介简单代码实现web worker 版本效果参考 功能简介 通过LuckyExcel的transformExcelToLucky方法&#xff0c; 我们可以把一个文件直接转成LuckySheet需要的json字符串&#xff0c; 之后我们就可以用LuckySheet预览excelLuckyExcel只能解析xlsx格式的excel文件&a…

apple MacBook Air A1466 i5 无线网卡驱动(亲测)

sudo apt update sudo apt install bcmwl-kernel-source

算法题型归类整理及同类题型解法思路总结(持续更新)

1、最优路线 通用思路 1、递归 #案例1-最优路测路线 题目描述 评估一个网络的信号质量&#xff0c;其中一个做法是将网络划分为栅格&#xff0c;然后对每个栅格的信号质量计算。 路测的时候&#xff0c;希望选择一条信号最好的路线&#xff08;彼此相连的栅格集合&#x…

Python28-7.4 独立成分分析ICA分离混合音频

独立成分分析&#xff08;Independent Component Analysis&#xff0c;ICA&#xff09;是一种统计与计算技术&#xff0c;主要用于信号分离&#xff0c;即从多种混合信号中提取出独立的信号源。ICA在处理盲源分离&#xff08;Blind Source Separation&#xff0c;BSS&#xff0…

3.js - 模板渲染 - 金属切面效果

md&#xff0c;狗不学&#xff0c;我学 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.m…

ISO 50001:企业节能减排与可持续发展的双赢之道

在全球气候变化日益严峻、资源日益稀缺的今天&#xff0c;能源管理已成为企业可持续发展不可或缺的一部分。ISO 50001作为国际能源管理体系标准&#xff0c;正在全球范围内被越来越多的企业采纳。它不仅帮助企业提高能源效率&#xff0c;减少能源消耗&#xff0c;还在多个方面对…

GPT-5 一年半后发布?对此你有何期待?

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; 随着科技的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;领域不断迎来新的突破和创新。在这一背景下&#xff0c;OpenAI 最近宣布将在一年半后发布 GPT-5&#xff0c;这一消息在科技界和广大AI爱好者中引…

Debezium报错处理系列之第109篇:解决升级日志解析jar包重启集群出现的字段类型和值不匹配的错误

Debezium报错处理系列之第109篇:解决升级日志解析jar包重启集群出现的字段类型和值不匹配的错误 一、完整报错二、错误原因三、解决方法Debezium从入门到精通系列之:研究Debezium技术遇到的各种错误解决方法汇总: Debezium从入门到精通系列之:百篇系列文章汇总之研究Debezi…