vue实现在v-html的html字符串中绑定事件


Posted in Javascript onOctober 28, 2019

需求:

需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效。

<div class="code-review">
  <div v-html="html" v-highlight @click="addComment($event)"></div>
</div>
 
 
computed: {
  html () {
   return '<button></button >'
  },
 },

解决办法:

在v-html同级元素中使用事件绑定,然后根据事件触发的目标对象去判断和获取参数。

addComment:function (event) {
 if(event.target.nodeName === 'BUTTON'){
 // 获取触发事件对象的属性
 alert("a");
 }
},

以上这篇vue实现在v-html的html字符串中绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
vue 实现input表单元素的disabled示例
Oct 28 #Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
VUE解决 v-html不能触发点击事件的问题
Oct 28 #Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 #Javascript
vue动态禁用控件绑定disable的例子
Oct 28 #Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 #Javascript
关于vue组件事件属性穿透详解
Oct 28 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python中的Numpy入门教程
2014/04/26 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
医学毕业生自荐信
2013/10/11 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
股权转让协议书范本
2014/04/12 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
另类冲刺标语
2014/06/24 职场文书
兽医医药专业求职信
2014/07/27 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
SQL注入详解及防范方法
2021/12/06 MySQL
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python