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 相关文章推荐
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
js密码强度实时检测代码
Mar 02 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
js html实现计算器功能
Nov 13 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
晶体管来复再生式二管收音机
2021/03/02 无线电
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python中私有函数调用方法解密
2016/04/29 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫