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 相关文章推荐
javascript document.compatMode兼容性
Feb 23 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django中几种重定向方法
2015/04/28 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python requests使用socks5的例子
2019/07/25 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python中round函数保留两位小数的方法
2020/12/04 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
认识深刻的检讨书
2014/02/16 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书