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脚本特性
Sep 13 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 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/04/15 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Python实现二叉堆
2016/02/03 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
python简单区块链模拟详解
2019/07/03 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
学生实习推荐信范文
2013/11/26 职场文书
班级学习计划书
2014/04/27 职场文书
家长给学校的建议书
2014/05/15 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年标准化工作总结
2014/12/17 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
mysql中关键词exists的用法实例详解
2022/06/10 MySQL