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动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
微信小程序实现图片上传功能
May 28 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
JavaScript实现打字游戏
Feb 19 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/08/11 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Pytorch的mean和std调查实例
2020/01/02 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
公司委托书格式范文
2014/04/04 职场文书
安全技术说明书
2014/05/09 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
房屋租房协议书范本
2014/12/04 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
军训个人总结
2015/03/03 职场文书
开会通知短信大全
2015/04/20 职场文书
质检员工作总结2015
2015/04/25 职场文书
婚礼父母致辞
2015/07/28 职场文书
Golang二维数组的使用方式
2021/05/28 Golang