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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
vue中使用ueditor富文本编辑器
Feb 08 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
JavaScript如何判断对象有某属性
Jul 03 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创建动态图像
2006/10/09 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
python图像处理之镜像实现方法
2015/05/30 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
keras 多gpu并行运行案例
2020/06/10 Python
python和php哪个更适合写爬虫
2020/06/22 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
应届毕业生通用的自荐书范文
2014/02/07 职场文书
永不妥协观后感
2015/06/10 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python