vue实现在v-html的html字符串中绑定事件

需求：

需要在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字符串中绑定事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发. 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: <template> <div class="hello"> <h1> 我是父组件 </h1> <div class

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • vue实现在v-html的html字符串中绑定事件

    需求: 需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效. <div class="code-review"> <div v-html="html" v-highlight @click="addComment($event)"></div> </div> compute

  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

  • 使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

    具体代码如下所示: <template> <div> <table> <tr v-for="item in tableData" :value="item.value" :key="item"> <td> <div> <template> {{item.id}} </template> </div> </td> <td&g

  • vue 实现强制类型转换 数字类型转为字符串

    我是从页面直接拿的ID过来的,类型是数字类型 后端需要的是字符串类型 只需要在后面加上 + ' ' ,传一个空字符串就可以了 以上这篇vue 实现强制类型转换 数字类型转为字符串就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue 实现对quill-editor组件中的工具栏添加title

    前言:quill-editor组件中的工具栏都是英文,而且最难受的时没有title提示,要怎样给他添加title,并且是中文的title提示呢? 一.创建一个quill-title.js文件 ①.在其中插入以下代码 const titleConfig = { 'ql-bold':'加粗', 'ql-color':'颜色', 'ql-font':'字体', 'ql-code':'插入代码', 'ql-italic':'斜体', 'ql-link':'添加链接', 'ql-background':'

  • vue之webpack -v报错解决方案总结

    小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装 cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧. cnpm install -g webpack 等一会安装成功了,我就想看一下webpack 的版本 又提示我要安装webpack-cli,那就安装吧 cnpm install -g webpack-cli 等一会就安装好了,再看一下webpack -v就报下面的错了. $ webpack -v C:\Users\Administrator\AppDa

  • PHP实现统计所有字符在字符串中出现次数的方法

    PHP实现统计所有字符在字符串中出现次数的方法

    本文实例讲述了PHP实现统计所有字符在字符串中出现次数的方法.分享给大家供大家参考,具体如下: 先来看看效果: 算法: 循环一次字符串(本例的$str),把出现过的字符串记录在一个数组(如本例的$strRecord)内,如果已经此记录函数已经有,则不记录: 在每个字符串时,拿来与记录数组的值进行比较(本例的$strRecord[]['key']),如果记录里的某个值和这个字符串一样,就记录次数+1(本例的$strRecord[]['count']); 当然,设置一个变量,默认为false(如本例

  • Golang编程实现删除字符串中出现次数最少字符的方法

    本文实例讲述了Golang编程实现删除字符串中出现次数最少字符的方法.分享给大家供大家参考,具体如下: 描述: 实现删除字符串中出现次数最少的字符,若多个字符出现次数一样,则都删除.输出删除这些单词后的字符串,字符串中其它字符保持原来的顺序. 输入: 字符串只包含小写英文字母, 不考虑非法输入,输入的字符串长度小于等于20个字节. 输出: 删除字符串中出现次数最少的字符后的字符串. 样例输入: abcdd 样例输出: dd 代码实现: 复制代码 代码如下: package huawei impo

  • php提取字符串中网站url地址的方法

    本文实例讲述了php提取字符串中网站url地址的方法.分享给大家供大家参考.具体分析如下: 今天写一个问答系统上线之后发现有很多人发链接了,由于业务部门要我们过滤掉网站地址了,下面我给大家分享一个提取字符串url地址函数,代码如下: 复制代码 代码如下: $postInfo['answer2'] ='可以的,商业贷款可摊还36%,公积金贷款可摊还16%|||可以先把账户里的余额提取出来用作首付,然后每个月贷款商业贷款可摊还36%,公积金贷款可摊还16%|||可以的,现在甲类公积金是摊还比例htt

  • php获取字符串中各个字符出现次数的方法

    本文实例讲述了php获取字符串中各个字符出现次数的方法.分享给大家供大家参考.具体实现方法如下: <?php //获取字符串是哪一个字符出现的字数最多 $str = "sdfhletlsflahlajgfd;lsje;r;wj;ralajfe149253573"; //方法一 $arr = str_split($str); //字符串分隔到数组中 $arr = array_count_values($arr); //用于统计数组中所有值出现的次数,返回一个数组 //键名为原数组的

随机推荐