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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
js实现select下拉框菜单
Dec 08 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
JQuery中extend的用法实例分析
2015/02/08 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python strip()函数 介绍
2013/05/24 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python3生成手写体数字方法
2018/01/30 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
个性婚礼策划方案
2014/05/17 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
诚信教育主题班会
2015/08/13 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
党员心得体会范文2016
2016/01/23 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
Python列表的索引与切片
2022/04/07 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS