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函数(json)附详细说明
May 25 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
TS 类型兼容教程示例详解
Sep 23 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
是否存在第一台收音机的说法
2021/03/01 无线电
html静态页面调用php文件的方法
2014/11/13 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
JS实现滚动条触底加载更多
2019/09/19 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
关于python写入文件自动换行的问题
2018/06/23 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python实现简单学生信息管理系统
2020/04/09 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
幼儿园新学期寄语
2014/01/18 职场文书
求职意向书
2014/04/01 职场文书
机器人总动员观后感
2015/06/09 职场文书
胡桃夹子观后感
2015/06/11 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS