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注册事件的常用方法
Apr 03 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
javascript流程控制语句集合
Sep 18 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
Vue实现简易计算器
Feb 25 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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基础学习笔记
2007/03/18 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python随机生成指定长度密码的方法
2015/04/04 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python如何保证输入键入数字的方法
2019/08/23 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
介绍一下gcc特性
2012/01/20 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
后勤主管岗位职责
2014/03/01 职场文书
教师远程培训感言
2014/03/06 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
优秀团队申报材料
2014/12/26 职场文书
安全教育主题班会教案
2015/08/12 职场文书