模板字符串使用点击事件【VUE3】

项目场景:

提示:这里简述项目相关背景:

项目中使用模板字符串的时候很多,有些时候需要再模板字符串中使用点击事件,那么在模板字符串中可以使用点击事件么?如果这个点击事件需要传参呢?

答案是肯定的,那么具体怎么绑定点击事件又该怎么传参呢?

  • 在模板字符串中绑定点击事件要用 onclick ='goDetails()'
  • 在onMounted钩子里面挂载在window上onMounted(() => { window["goDetails"] = goDetails;});
  • 总结:为什么需要定义window.getDownUp = this.getDownUp?

    1.在字符串里的点击事件是原生的onclick
    2.原生的函数getDownUp是定义在window全局对象上的

  • 然后使用这个定义好的点击事件 const goDetails=(val)=>{......}


原因分析:

提示:这里填写问题的分析:

 但是在传参的时候,单独传参是ok传对象会报错

这是因为传的是变量,将变量转成字符串对象就可以了

onclick ='goDetails(${JSON.stringify(item)})'


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/bicheng/84721.shtml

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

相关文章

AI——DeepSeek+LangChain+streamlit 实现智能汽车维修服务

效果图 分析流程 代码实现 废话少说,直接上代码 from langchain_core.language_models.llms import BaseLLM from langchain_core.outputs import Generation, LLMResult from pydantic.v1 import Field, validator from typing import Any, Dict, List, Optional…

《C++ 继承》

目录 继承的定义 继承类模板 派生类和基类之前的转换 隐藏 派生类的默认成员函数 不能被继承的类 继承中的友元和静态成员 继承模型 继承的定义 继承的本质是一种复用。规定Person类为基类,Student类为派生类 。 继承方式分为public继承,prote…

金蝶K3 ERP 跨网段访问服务器卡顿问题排查和解决方法

我一朋友公司反应,公司网络卡顿,测试掉包严重,抓包wireshark测试,发现arp包有大量mac欺骗,因为公司有几百台电脑,所以建议更换了三层交换机,划分了vlan,这样有效的避免了网络风暴等&…

无需安装!在线数据库工具 :实战 SQL 语句经典案例

在数字化时代,SQL(结构化查询语言)已成为数据从业者、开发人员乃至业务分析人员必备的核心技能。无论是处理日常数据报表,还是应对复杂的业务逻辑,SQL 都能高效实现数据的查询、操作与分析。本文将通过经典的 SQL 练习…

如何在网页里填写 PDF下拉框

对于PDF 开发者或网页开发者来说,让用户在网站上填写 PDF 下拉框(Combo Box)是一个棘手的问题。因为 PDF 并不是一种原生的 Web 格式,浏览器通常不允许用户与 PDF 下拉框进行交互。 那么,如何让用户在 HTML 中填写 PD…

.Net 优秀框架 ABP全面详解

文章目录 第一部分:ABP框架概述与核心架构1.1 ABP框架简介1.2 ABP框架架构解析1.2.1 表现层(Presentation Layer)1.2.2 分布式服务层(Distributed Service Layer)1.2.3 应用层(Application Layer)1.2.4 领域层(Domain Layer)1.2.5 基础设施层(Infrastructure Layer)…

力扣-198.打家劫舍

题目描述 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋…

windows 安装vllm cuda版本

windows 安装cuda版本 查看window cuda版本 nvidia-smi vllm 获取镜像,此版本需要cuda 版本12.8 或以上 docker pull vllm/vllm-openai:latest下载模型 git lfs installcd e:\ai mkdir vllm\models\qwen2cd vllm\models#通过git下载git clone https://www.modelscope.c…

Node.js特训专栏-基础篇:1. Node.js环境搭建与项目初始化详细指南

我将为你详细讲解 Node.js 环境搭建与项目初始化的步骤,包含常见问题解决和最佳实践,帮助你快速上手。 详细步骤说明 1. 环境搭建 Windows用户: 访问Node.js官网(https://nodejs.org)下载LTS版本安装包(推荐长期支持版&#xf…

13.安卓逆向2-frida hook技术-HookJava构造方法

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于:图灵Python学院 工具下载: 链接:https://pan.baidu.com/s/1bb8NhJc9eTuLzQr39lF55Q?pwdzy89 提取码&#xff1…

php基础:常见函数

内建函数 文章目录 内建函数1、文件操作函数:2、代码执行函数:3、反序列化函数:4、数据库操作函数:5、类型转换与比较函数:6、其他常见函数: 1、文件操作函数: include(): 导入并执行指定的 PHP…

教程:PyCharm 中搭建多级隔离的 Poetry 环境(从 Anaconda 到项目专属.venv)

核心思维:为什么需要 “多级隔离”? 在复杂项目中,环境冲突是最棘手的问题(比如系统 Python 版本不同、依赖包版本冲突)。通过 “Anaconda 虚拟环境 → 项目 Poetry 环境 → 工具级隔离” 的三层架构,实现…

Rollup vs Webpack 深度对比:前端构建工具终极指南

前端工程领域始终面临一个根本选择:如何在模块化编码规范与工程化构建效率之间取得最佳平衡。Rollup与Webpack分别代表着两种不同维度的解决方案,本文将揭示它们的真实应用场景与核心差异。 一、核心差异全景图(附最新对比) 核心能…

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类(导入/导出共用)2. 写 Excel3. 读 Excel 三、常用注解说明(完整列表)四、进阶:自定义转换器(Converter) 其它自定义转换器没生效 Easy Excel在…

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…

AI高考志愿助手应用架构设计并上线实施运行

环境: AI高考志愿助手 问题描述: AI高考志愿助手应用架构设计并上线实施运行 业务需求:开发一个AI升学助手,功能是帮助用户模拟填报高考志愿等功能,数据是历年各专业的录取分数线表格。数据确认: 近3年约100多万条数据,原始数据是excel表格数据。解决方案: 一、项…

深入浅出掌握 Axios(持续更新)

在了解ajax和axios之前,我们先观察一下他们是什么英文的缩写 ajax 的名字为 asynchroanous JavaScript and XML 而axios的名称来源于英文单词“axis”与“I/O”的结合,并非直接缩写自某个特定短语。 先导知识 在本文我们简单的介绍一下ajax后着重讲解…

windows10下搭建nfs服务器

windows10下搭建nfs服务器 有参考这篇博客 Windows10搭建NFS服务 - fuzidage - 博客园 下载 NFS Server这个app 通过网盘分享的文件:nfs1268 (1).exe 链接: https://pan.baidu.com/s/1rE4h710Uh-13kWGXvjkZzw 提取码: mwa4 --来自百度网盘超级会员v5的分享 下载后…

npm符号链接

前言 最近在写一个快应用项目,demo中依赖了本地文件,package.json如下: 此时 node_modules 下出现了 mysdk,复制整个项目,但是copy的项目中的node_modules并未出现该文件,导致报错。 解决方案 观察 pa…