vue事件参数

事件参数

事件参数可以获取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.mzph.cn/bicheng/41872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于HTTP的攻击实验

实验原理&#xff1a;1. 根据ARP中间人攻击&#xff0c;获取 用户和服务器之间的数据2. 将获取到的数据 通过一定的技术来复原&#xff0c;进而获取用户的信息或者 相关权限实验拓扑图 将 kali 的网卡改为桥接模式&#xff0c;查看Kali和本机的ip 启动ettercap&#xff0c;…

【Python学习】流程控制、函数与类详解

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 Python作为一门强大而又简洁的编程语言&#xff0c;提供了丰富的工具和结构来帮助开发者编写清晰、高效的代码。在本文中…

阿里云OSS文件上传不配置环境变量使用显式AccessKey验证

问题背景 在中阿里云官方文档中介绍文件上传时&#xff0c;推荐配置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。这里用简单的方法&#xff0c;直接在Demo.java中显式指定accessKeyId和accessKeySecret&#xff0c;同时修改OSSClientBuilder()的入参。 解决方法 首先…

C语言 -- 深入理解指针(一)

C语言 -- 深入理解指针&#xff08;一&#xff09; 1.内存和地址1.1 内存1.2 究竟该如何理解编址 2. 指针变量和地址2.1 取地址操作符&#xff08;&&#xff09;​2.2 指针变量和解引用操作符&#xff08;*&#xff09;​​2.2.1 指针变量2.2.2 如何拆解指针类型2.2.3 解引…

C++11 shared_ptr---面试常考

shared_ptr简介 共享对其所指堆内存空间的所有权&#xff0c;当最后⼀个指涉到该对象的shared_ptr不再指向他时&#xff0c;shared_ptr会⾃动析构所指对象如何判断⾃⼰是否指涉到该资源的最后⼀个&#xff1f;《引⽤计数》 shared_ptr构造函数&#xff0c;使引⽤计数析构函数&…

Java线上接口耗时分析神器 Arthas

介绍 程序员的日常&#xff0c;总是离不开“调优”和“排查”。尤其当线上环境出现问题&#xff0c;性能瓶颈把人逼疯。这时候&#xff0c;你就需要一款像 Arthas 这样的神器来救场。 什么是 Arthas&#xff1f; 简单来说&#xff0c;Arthas 是阿里巴巴开源的 Java 诊断工具…

String类对象比较:==和equals的具体细节

public class test {public static void main(String[] args) {String name1 "zzz";String name2 "zzz";String name3 new String("zzz");// hashCode() 方法&#xff1a;基于字符串的内容计算哈希值&#xff0c;因此内容相同的字符串对象其 …

在 PostgreSQL 中,如何处理多个长时间运行的查询对系统资源的竞争?

文章目录 一、问题分析二、解决方案&#xff08;一&#xff09;优化查询语句&#xff08;二&#xff09;限制资源使用&#xff08;三&#xff09;调整数据库参数&#xff08;四&#xff09;监控和分析查询性能&#xff08;五&#xff09;分区表&#xff08;六&#xff09;异步处…

Ratf协议图解、Nacos CP集群源码分析

文章目录 Nacos CP集群说明Raft协议leader选举重新选举leader多个Candidate情况更新操作&#xff0c;日志复制网络分区 源码实现服务注册leader选举leader心跳包 Nacos CP集群 说明 CAP原则 C 一致性 ConsistencyA 可用性 Availability分区容错性 Partition tolerance 分区…

【密码学】密码学五要素

密码学五要素是密码系统的基本组成部分&#xff0c;这五个要素共同构成了密码系统的框架。在实际应用中&#xff0c;密码系统的安全性依赖于密钥的安全管理以及算法的强度。 如果任何一方被泄露或破解&#xff0c;那么整个密码系统都将面临风险。因此&#xff0c;在设计和使用密…

生物化学笔记:电阻抗基础+电化学阻抗谱EIS+电化学系统频率响应分析

视频教程地址 引言 方法介绍 稳定&#xff1a;撤去扰动会到原始状态&#xff0c;反之不稳定&#xff0c;还有近似稳定的 阻抗谱图形&#xff08;Nyquist和Bode图&#xff09; 阻抗谱图形是用于分析电化学系统和材料的工具&#xff0c;主要有两种类型&#xff1a;Nyquist图和B…

《第一行代码》小结

文章目录 一. Android总览1. 系统架构2. 开发环境3. 在红米手机上运行4. 项目资源详解4.1 整体结构4.2 res文件4.3 build.gradle文件 二. Activity0. 常用方法小结1. 创建一个Activity 一. Android总览 1. 系统架构 应用层&#xff1a;所有安装在手机上的应用程序 应用框架层&…

罗剑锋的C++实战笔记学习(一):const、智能指针、lambda表达式

1、const 1&#xff09;、常量 const一般的用法就是修饰变量、引用、指针&#xff0c;修饰之后它们就变成了常量&#xff0c;需要注意的是const并未区分出编译期常量和运行期常量&#xff0c;并且const只保证了运行时不直接被修改 一般的情况&#xff0c;const放在左边&…

解决Docker Desktop启动异常 Docker Desktop- WSL distro terminated abruptly

异常 当打开Docker Desktop时候&#xff0c;启动docker引擎时&#xff0c;提示 加粗样式文本信息 Docker Desktop - WSL distro terminated abruptly A WSL distro Docker Desktop relies on has exited unexpectedly. This usually happensas a result of an external entit…

Vue2基础 14:自定义指令

自定义指令 1 函数式1.1 案例--v-text放大10倍 2 对象式2.1 案例--v-fbind默认获取焦点&#xff08;函数式&#xff09;2.2 案例--v-fbind默认获取焦点&#xff08;对象式&#xff09; 3 自定义指令容易犯的错4 全局指令写法&#xff08;参考过滤器写法&#xff09;&#xff1a…

Go 依赖注入设计模式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

系统重装

待更新 重置win11 双系统删除其中一个&#xff0c;并将格式化后的空间并入

跟着峰哥学java 第四天 商品分类 前后端显示

1.后端 1.1mybatis-plus分页查询配置 在商品热卖数据中&#xff0c;只让其显示八条数据 将要使用分页 也就是service.page方法 此时需要配置 mp拦截器 Configuration public class MybatisPlusConfig {Beanpublic PaginationInterceptor paginationInterceptor() {return …

模型训练之数据集

我们知道人工智能的四大要素&#xff1a;数据、算法、算力、场景。我们训练模型离不开数据 目标 一、数据集划分 定义 数据集&#xff1a;训练集是一组训练数据。 样本&#xff1a;一组数据中一个数据 特征&#xff1a;反映样本在某方面的表现、属性或性质事项 训练集&#…