vue事件参数

news2024/11/15 21:48:50

事件参数

事件参数可以获取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.coloradmin.cn/o/1901246.html

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

相关文章

go 为什么是抢占式调度

GMP 模型 gmp模型是 golang 中用于调度管理 goroutine 的调度器。 调度器的发展史 在 Go 语言中&#xff0c;Goroutine 早期是没有设计成抢占式的&#xff0c;早期 Goroutine 只有读写、主动让出、锁等操作时才会触发调度切换。 这样有一个严重的问题&#xff0c;就是垃圾回…

AI视频生成技术爆发 引领虚拟数字人产业新潮流

2024年刚开局&#xff0c;先有OpenAI的AI视频生成模型Sora惊艳全网&#xff0c;随后阿里巴巴发布EMO&#xff0c;一张照片音频&#xff0c;就能生成具有生动表情和各种头部姿势、口型完全匹配高保真的人声头像动态视频。 技术的革新不仅为内容创作者打开了新世界的大门&#xf…

Spring Boot基础篇

快速上手 SpringBoot是由Pivotal团队提高的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始化搭建以及开发过程 入门案例 在Idea创建 创建时要选择Spring Initializr。 Server URL为要连接的网站&#xff0c;默认为官网start.spring.io&#xff08;访问速度慢&…

为什么建议 MySQL 数据库字段一定要设置 NOT NULL

1. 前言 建议 MySQL 数据库字段一定要设置 NOT NULL 这句建议你可能听好多人讲过&#xff0c;但是有没有仔细想过为什么别人这么说 &#xff1f; 在实际开发中&#xff0c;对使不使用 not null 很多人并没有一个明确的标准&#xff0c;要知道某个字段需不需要添加 not null&a…

【MYSQL】事务隔离级别以及InnerDB底层实现

事务隔离级别 读未提交&#xff08;Read Uncommitted&#xff09; 允许事务读取其他事务未提交的数据&#xff0c;可能会导致脏读。 读已提交&#xff08;Read Committed&#xff09; 一个事务只能看见已经提交的事务所做的更改&#xff0c;可以避免脏读&#xff0c;但可能…

基于CLIP特征的多模态大模型中的视觉短板问题

【论文极速读】 基于CLIP特征的多模态大模型中的视觉短板问题 FesianXu 20240706 at Tencent WeChat search team 前言 今天读到篇CVPR 24’的论文 [1]&#xff0c;讨论了常见的多模态大模型&#xff08;大多都基于CLIP语义特征&#xff0c;以下简称为MLLM&#xff09;中的视觉…

阿里云服务器配置、搭建(针对Spring boot和MySQL项目)

这是一篇极其详细且痛苦的文章&#xff0c;还是在两位后端的大佬手把手教导下、以及我找遍全网所有资料、问了N遍AI、甚至直接申请阿里云工单一对一询问客服一整天、连续清空再上传反复30多次整个项目jar包......总结出来的终极要人命踩坑的问题总结 一、首先购买服务器 其实不…

Apache Seata分布式事务及其三种模式详解

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata分布式事务及其三种模式详解 分布式事务 Seata 及其三种模式详解 | Meetup#3 回顾…

基于TCP的在线词典系统(分阶段实现)

1.功能说明 一共四个功能&#xff1a; 注册 登录 查询单词 查询历史记录 单词和解释保存在文件中&#xff0c;单词和解释只占一行, 一行最多300个字节&#xff0c;单词和解释之间至少有一个空格。 2.功能演示 3、分阶段完成各个功能 3.1 完成服务器和客户端的连接 servic…

【深度学习】图形模型基础(5):线性回归模型第四部分:预测与贝叶斯推断

1.引言 贝叶斯推断超越了传统估计方法&#xff0c;它包含三个关键步骤&#xff1a;结合数据和模型形成后验分布&#xff0c;通过模拟传播不确定性&#xff0c;以及利用先验分布整合额外信息。本文将通过实际案例阐释这些步骤&#xff0c;展示它们在预测和推断中的挑战和应用。…

编程上下文Context及其实现原理

编程上下文Context及其实现原理 author:shengfq date:2024-07-06 title:编程上下文Context及其实现原理 category:编程思想1.编程中的上下文Context是指什么? 在编程和软件工程领域&#xff0c;“上下文”&#xff08;Context&#xff09;是一个多义词&#xff0c;其含义可以…

产品经理-​合作的6类干系人(8)

在一个项目中&#xff0c;产品经理并不是一个人在战斗&#xff0c;而是在很多同事的配合下共同完成项目。那产品经理到底要和哪些角色配合&#xff0c;一起完成项目呢 中间的产品经理是一个项目的驱动者。而产品经理的前方是“Boss/Leader”&#xff0c;也就是创业团队中公司的…

地级市数字经济指数、互联网用户数、数字金融普惠指数

2000-2022年地级市数字经济指数&#xff08;含控制变量&#xff09; 目录 数字经济如何改善环境污染 一、引言 二、文献综述 三、实证模型 四、数据来源 五、程序代码 六、运行结果 数字经济如何改善环境污染 摘要&#xff1a; 本论文旨在探讨数字经济对环境污染的改善作…

三级_网络技术_04_中小型网络系统总体规划与设计

1.下列关于路由器技术特征的描述中&#xff0c;正确的是()。 吞吐量是指路由器的路由表容量 背板能力决定了路由器的吞吐量 语音、视频业务对延时抖动要求较低 突发处理能力是以最小帧间隔值来衡量的 2.下列关于路由器技术特征的描述中&#xff0c;正确的是()。 路由器的…

Matlab中collectPlaneWave函数的应用

查看文档如下&#xff1a; 可以看出最多5个参数&#xff0c;分别是阵列对象&#xff0c;信号幅度&#xff0c;入射角度&#xff0c;信号频率&#xff0c;光速。 在下面的代码中&#xff0c;我们先创建一个3阵元的阵列&#xff0c;位置为&#xff1a;&#xff08;-1,0,0&#x…

JavaWeb----JSPJSTL

目录 JSP显隐注释在JSP中写java程序JSP的指令标签JSP中的四大域对象简易版用户登录EL表达式 JSTL条件动作标签if标签 choose\when\otherwise标签迭代标签格式化动作标签 用户登录实例查看是否安装了mysql用户登录界面后台实现 JSP JSP全名是Java Server Pages&#xff0c;它是建…

【后端面试题】【中间件】【NoSQL】MongoDB查询优化3(拆分、嵌入文档,操作系统)

拆分大文档 很常见的一种优化手段&#xff0c;在一些特定的业务场景中&#xff0c;会有一些很大的文档&#xff0c;这些文档有很多字段&#xff0c;而且有一些特定的字段还特别的大。可以考虑拆分这些文档 大文档对MongoDB的性能影响还是很大的&#xff0c;就我个人经验而言&…

常见算法和Lambda

常见算法和Lambda 文章目录 常见算法和Lambda常见算法查找算法基本查找&#xff08;顺序查找&#xff09;二分查找/折半查找插值查找斐波那契查找分块查找扩展的分块查找&#xff08;无规律的数据&#xff09; 常见排序算法冒泡排序选择排序插入排序快速排序递归快速排序 Array…

在Apache HTTP服务器上配置 TLS加密

安装mod_ssl软件包 [rootlocalhost conf.d]# dnf install mod_ssl -y此时查看监听端口多了一个443端口 自己构造证书 [rootlocalhost conf.d]# cd /etc/pki/tls/certs/ [rootlocalhost certs]# openssl genrsa > jiami.key [rootlocalhost certs]# openssl req -utf8 -n…

Pycharm远程连接GPU(内容:下载安装Pycharm、GPU租借、配置SSH、将代码同步到镜像、命令行操控远程镜像、配置远程GPU解释器)

目录 windows下载安装pycharmGPU租借网站AutoDlfeaturize好易智算 GPU租借GPU选择选择镜像充值 然后创建镜像创建成功 复制SSH登录信息 远程进入镜像 在Pycharm中进行ssh连接新建SFTP配置SSH复制ssh根据复制的信息填写ssh配置测试连接 将代码同步到远程镜像上设置mappings将本地…