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中parseInt()函数的定义和用法分析
Dec 20 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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 第二节 数据类型之字符串类型
2012/04/28 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
解决Python二维数组赋值问题
2019/11/28 Python
python如何编写win程序
2020/06/08 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
财政局长自荐信范文
2013/12/22 职场文书
应用英语专业自荐信
2014/01/26 职场文书
办公室副主任职责范本
2014/03/08 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书