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 相关文章推荐
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
限制只能输入数字的实现代码
May 16 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JavaScript实现简单随机点名器
Nov 21 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
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
学习ExtJS border布局
2009/10/08 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
explicit和implicit的含义
2012/11/15 面试题
学校元旦晚会开场白
2015/05/29 职场文书
入队仪式主持词
2015/07/04 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript