vue 模板字符串使用点击事件失效

杂草沫 杂草沫 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 700+累计阅读 773平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-06-09 14:11:48 发布 773 阅读 AI 写同款· GEO 优化 ›
vue重点1：disabled=“false“ 在字符串模板中无效的原因 问题: 在字符串模板里对按钮设置属性的时候，想要先测试一下的，实现 的效果，但是发现失效 产生原因: 我上面的东西是写在字符串模板里的，所以布尔值在字符串模板里是字符串型的，所以我们需要将其绑定成一个变量 设置禁用的一个小技巧 ... 阅读详情

vue 模板字符串使用点击事件

在这里插入图片描述

总结：为什么要把clickButton写入window（window.clickButton= this.clickButton）

  1. 在字符串里的点击事件是原生的onclick
  2. 原生的函数clickButton是定义在window全局对象上的
  3. 特别注意：触发的事件传参如果是多个参数一定要给每个参数加引号，否则会报错
收录于
前端

当前文章被收录于：

前端
34 篇文章 0 人学习
订阅专栏 查看详情
vue

当前文章被收录于：

vue
18 篇文章 0 人学习

vue

订阅专栏 查看详情
标签
#前端 #javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
别再只用CANape测数据了！手把手教你用ASAP2 Studio编辑A2L文件（附MAP文件更新避坑指南） 本文深入探讨ASAP2 Studio在ECU开发中的高阶应用，特别是如何利用其编辑A2L文件并同步更新MAP文件，提升测量标定效率。文章详细解析了ASAP2 Studio的双向同步能力、MAP文件更新全流程及变量管理技巧，帮助工程师避免常见错误，优化工作流程。 阅读详情

相关推荐

Dynamics 365 On-Premise Server v9.0部署体验

期盼已久的Dynamics 365 On-Premise的版本升级终于在11月初姗姗来迟。 11月2日起已经可以在官方渠道下载正式版的Dynamics 365 Server v9.0安装文件，版本号9.0.2，随手附上中文版安装文件下载地址。 想必已经有不少小伙伴开始尝试各种升级、安装了吧。 Dynamics 365 On-Premise的安装过程，度娘一下已经有很多了，这里就不赘述了，只是...

Roger的专栏 2140

VUE字符串模板点击失效

1、把@click改成onClick。

c_qianxia5040的博客 527

ROS2理论与实践_宇树机器人Go2开发指南（文字）

本文介绍了Unitree Go2机器人ROS2开发环境的安装与配置流程。主要内容包括：1)从GitHub克隆unitree_ros2仓库；2)安装ROS2 Foxy版本依赖项；3)编译特定版本的CycloneDDS(0.10.2)；4)编译unitree_go和unitree_api功能包；5)网络配置，包括设置静态IP和修改环境变量脚本setup.sh以指定网络接口。文章还提供了本地回环测试的替代方案，并建议配置完成后重启电脑。整个流程涉及ROS2环境切换、网络适配和编译安装等多个技术环节。

Li_Dongyi的博客 4207

模版字符串拼接点击事件在vue项目中不生效问题

模版字符串中方法调用无效

alessia_wang的博客 1241

VTK 9.2.0 在 Windows 10 上编译全记录：从 CMake 配置到 VS2019 项目生成（附 Qt 环境变量避坑点）

本文详细记录了VTK 9.2.0在Windows 10上的编译全过程，从CMake配置到VS2019项目生成，特别强调了Qt环境变量的避坑点。通过实战步骤和调试技巧，帮助开发者顺利完成VTK编译，适用于三维可视化开发。

weixin_30082367的博客 365

【WSL2+Ubuntu+Docker Desktop】迁移到D盘

该篇文章包含将WSL2+ubuntu+Docker Desktop从C盘迁移到D盘

哈茶的博客 3930

在vue中使用字符串模板拼接的点击事件@click时点击事件失效

在vue中使用字符串模板拼接的点击事件@click时，点击事件失效 处理办法 1.将@click 改成onClick str = `<p class="riskType"><strong>风险点：</strong> <a onClick="riskBox('${item.riskContent}','${item.riskTypeName}')">审查建议</a></p>` 2、在生命周期mounted中赋值方法给window对象，

茉莉蜜茶~~~ 3169

手把手教你用闲置安卓手机搭建个人收款系统（蓝鲸支付私有化部署实战）

本文详细介绍了如何利用闲置安卓手机搭建个人收款系统，实现私有化支付部署。通过开源技术栈和容器化方案，零成本构建安全、高效的支付网关，解决传统支付平台的数据安全和资金风险问题。特别适合个人开发者和小微企业主，无需复杂审批，资金实时到账，显著降低运营成本。

weixin_30363285的博客 381

在Vue的模板字符串中添加点击函数

在Vue的模板字符串中添加点击函数 第一步： 给模板字符串添加点击事件getInfo html += `<button οnclick="details('${params}')">${params.name}</button>` 第二步： 在mounted中将方法赋给window对象 mounted () { window.details= this.details }, 第三步： 在methods创建getInfo函数 methods: { getInfo

weixin_46070967的博客 1793

【四足机器人项目实战】四足机器人运动学、动力学模型

系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 TODO:写完再整理 文章目录系列文章目录前言一、四足机器人实际模型的物理难点二、四足机器人运动学模型1.方法一：DH法建立运动学模型（1）运动学建模构型方法（2）运动学模型描述方法1、基于DH法四足机器人单腿运动学模型公式推导（0）DH法科普1）原理2）实现过程3）评价（1）四足机器人的建模规则、坐标系定义及实物参数确定1）标准Denavit-Hartenberg法建模规则2）单腿运动学模型坐标系定义示意图及简化模型3）

qq_35635374的博客 1万+

【一看就会】autoware universe项目结构解析——从一层一层直到control源码

下载安装autoware universe花了一天。下载好之后，按照网上说的跑了一下仿真是能跑的，证明下的代码没问题。然后就得看一下各模块实现的源码了。但是当我打开这些文件的时候。我勒个豆。这么多是个玩意儿。我连该启动哪个launch文件，哪个文件夹是干啥的都不知道。在我慢慢弄懂之后，我也记录这个庞大的项目的各个文件夹和里面的文件以及项目，以及自己使用时应该启动哪些launch文件。这篇文章目的就是通过找到control部分的源码，来帮助我们梳理这个庞大项目的各个文件的功能。

weixin_48386130的博客 2037

vue3 中模板字符串中添加click方法并传参

js拼接onClick事件，并把事件绑定到window对象上即可。

lfYexun的博客 1619

拿下华为性格测试！

华为性格测试指南

weixin_41171614的博客 5283

vue 字符串获取最后一位字符_vue 父子传值props赋值失效问题

前天我的同事问了我一个问题，说她遇到一个父子组件之间的props赋值失效的问题，奇怪的是同一个页面另外一个地方也调用了同一个子组件并且props使用赋值正常，而且她和我说其他props能正常赋值，还就只有一个props：noOptionsText这个属性赋值失效。附上图：props赋值正常的代码块（模板字符串中调用）：props赋值失效的代码块（template中调用）：一开始我也是愣住了，在子组...

weixin_39651816的博客 2859

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

vue子组件赋值props_vue 父子传值props赋值失效问题

前天我的同事问了我一个问题，说她遇到一个父子组件之间的props赋值失效的问题，奇怪的是同一个页面另外一个地方也调用了同一个子组件并且props使用赋值正常，而且她和我说其他props能正常赋值，还就只有一个props：noOptionsText这个属性赋值失效。附上图：props赋值正常的代码块（模板字符串中调用）：props赋值失效的代码块（template中调用）：一开始我也是愣住了，在子组...

weixin_39707536的博客 3898

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

vuejs知乎_考虑在你的下一个Web项目中使用VueJS吧！

VueJS是什么？大致上，你可以把Vue(读音与view相同)理解为MV*当中的V层，如果非要和别的框架比较的话，你可以把Vue理解成为上手门槛很低的类React框架。不需要你学习JSX一类的奇葩语法，也不需要预编译，只要像往常引用类库一样，在你页面的header里面加一个vue的引用链接，就可以开始使用啦。而从Vue的模板标记里，你可能会找到Angular或Mustache等框架的影子。接下来我...

weixin_39855634的博客 156

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

关于在Vue组件中es6语法无法使用模板字符串和一些换行符怎么解决的

关于在Vue组件中es6语法无法使用模板字符串和一些换行符怎么解决的 遇到的问题 就是cotent：“RF第一行”，“RF第一行”，“RF第一行”有换行效果。如下：第一行 第二行第三行在一开始的时候，我是用 es6模板字符串实现不了，后面的就用\n 和<br>换行符号，发现不识别，然后用&nbsp 空格符号也不识别，然后就用/xa0这个，虽然识别但是呢，调节不好成换行效果。后面就开始尝试各种办法，听大神说可以使用pre code 实现但是我还是没有实验成功pre``code(后面来补充

weixin_45867330的博客 3337

Vue.js 踩坑实录：$refs 访问 DOM 失效的 6 种现场与急救指南

拿不到 DOM，90% 是时机不对，9% 是语法写错，剩下 1% 才是玄学。把访问时机（mounted / nextTick）和语法（组合式 vs 选项式）写对，$refs永远不会坑你。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》

有我更精彩的博客 798

解决vue打包后动态组件component加载字符串模板失效问题

vue有runtime-compiler和runtime-only两种编译模式，默认为runtime-only，这种模式下的代码轻便，但是不能使用template参数，如果使用vue-cli进行项目搭建，可以在vue.config.js里面配置属性runtimeCompiler: true。今天在部署vue项目的时候，发现动态模板加载的图片无法显示。1.首先这个问题和创建vue项目的时候选择编译模式有关。经过一顿查疑解惑，终于找到了问题所在。以下是我代码里面失效部分。然后重新打包发布就可以了。

m0_58622543的博客 1536

解决原生template标签在Vue中失效的问题

需要原生Javascript + three.js的数据标注平台加入Vue框架.本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题.

白瑕 的博客 3568

vue raw html,javascript - Vuejs - Render raw html links to <router-link> - Stack Overflow

I;m new to VueJS and I'm making some weird experiments. I build a backend service using python/flask and this backend provide me a string of html code with many tags inside, I want to render this ins...

weixin_39989796的博客 201

使用vue-template-loader将模板编译成渲染函数的Webpack配置技巧

你是否也经历过这样的场景： deadline前的周三下午，咖啡因已经失效，屏幕上却跳出`Template compilation failed`的红色报错。Vue单文件组件（SFC）的`.vue`格式用腻了，想试试把模板抽成单独的`.html`文件，结果webpack配置直接给你脸色看。 作为每天和`webpack`、`vue-loader`打交道的前端工程师，我们都懂这种痛——明明是很简单的需求，却要在`module.rules`里反复调试正则表达式，在`vue-template-compiler`和`

前端大白话 1101

在vue中使用变量给模板中的图片地址赋值失效问题，应使用require或import引入图片

在vue中使用变量给模板中的图片地址赋值失效问题，应使用require或import引入图片

D浩DzD的博客 879

json字符串,本地存储讲解localstorage 和 sessionstorage及cookie,模板字符串初识

json字符串 “abc123truelkgsjhgo” 普通字符串 "<h1>hgahgo</h1>" html格式字符串 键值对格式 键和值都需要用双引号去包括 ‘“name”:“yasuo”’ json用途： 在网络传输时使用。 比如前后端交互。 不能够传输对象和数组的。 只能通过字符串形式去传输数据。 所以说我们如果要传输对象和数组，我们需要将其转换为字符串。 json格式就是满足对象和数组数据结构的一种字符串 json的使用方法 JSON.parse() 把json格式

你还有我 1529

vue-i18n 插件打包解析失效问题记录

vue-i18n@12.x 是alpha 版本，API 变动大，与许多Vue 3 插件、Vite 插件、以及社区用法不兼容。建议使用稳定版本的vue-i18n。尝试在vite.config.js配置文件中增加runtimeOnly: false属性，无效。开发环境中没有问题的，但打包发布之后就不行了，显示的就是模板字符串。真棒，又是努力的一天。和max讨论一番发现。

KoalaShane 709

Vue v-html 中事件绑定失效问题及解决方案

Vue中v-html指令的事件绑定问题及解决方案 问题：使用v-html渲染HTML时，其中的Vue指令无法正常工作。 原因：Vue不会编译v-html插入的HTML内容，导致指令和事件绑定失效。 解决方案：采用事件委托方式，在父元素监听点击事件，通过判断事件目标触发相应方法。 实践建议：使用class标识可点击元素，data属性存储数据，注意防范XSS攻击。 优点：性能更优，兼容性好，适用于动态内容场景。

weixin_45274678的博客 315
上一篇： js 简单数组元素去重
下一篇： yarn证书失效
点赞 0
评论 1
书签 书签 2
杂草沫
杂草沫
博客等级 码龄9年 7粉丝 46原创
+ 关注 专栏目录 订阅专栏
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值