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 相关文章推荐
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript基本类型详解
Nov 28 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
python字典DICT类型合并详解
2017/08/17 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
详解django2中关于时间处理策略
2019/03/06 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
计算机系毕业生推荐信
2013/11/06 职场文书
工艺员岗位职责
2014/02/11 职场文书
岗位职责风险点
2014/03/12 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
上诉状格式
2015/05/23 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang