主要代码如下: vue中代码 /*@autor:dantaxiaozi @time:2021/4/28 @desc: 解决v-html中点击事件无效的方法*/<template><divid="announcementList"><divclass="affiche_text"><pv-html="textContent"@click="triggerClick"></p></div></div></template><script>exportdefault{ name:"announcementList", pro...
v-html是vue中用来将string形式的html内容按普通HTML插入的命令 - 并且插入的内容不会作为 Vue 模板进行编译 。 项目中遇到的问题: vue用v-html命令解析带有html标签的内容,a标签内有点击事件(格式:<a @click='test()'>我是a标签</a>),但是采用v-html解析标签时会导致点击事件失效 就是前面提到的v-html的...
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: <template><divclass="hello"><h2>我是父组件</h2><divclass="parent"id="par...
亲，你没有绑定点击事件在<el-row id="doubtImg" class="commonRow" v-html="OCRModel.OCR_IMGTYP023_Div">这个上面！<el-row id="doubtImg" class="commonRow" v-html="OCRModel.OCR_IMGTYP023_Div">这段话改成<el-row id="doubtImg" class="commonRow" v-html="OCRModel.OCR_IMGT...
VUE解决 v-html不能触发点击事件的问题 背景:后端返前端html格式的数据,前端用v-html解析渲染,如:,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: [removed] import Vue from 'vue'; var MyC ...
如何在Vue中的“ v-html”上绑定点击事件 <template> <div > <div style="font-size: 12px;" @click.native="onZyInfo(item)" v-html="formatEscapeChar(item.attachmentContent)"></div> </div> </template> methods:{ onZyInfo(item){ } }...
首先,在Vue组件中,使用v-html指令将HTML内容动态渲染到模板中。例如,可以将一个包含点击事件的HTML字符串赋值给一个data属性,然后在模板中使用v-html指令将其渲染出来。 接下来,为了在v-html渲染的HTML内容上绑定click事件,需要使用Vue的事件修饰符。事件修饰符是以"@"符号开头的指令,用于监听DOM事件。 在模...
在数据库的某个字段中保存了一些布局样式的信息,并且在某些标签中还含有click事件,动态clss,style以及v-if,v-show等,如果我们直接只用v-html来展示数据的话,是能够呈现给用户的,但是缺少交互,添加的事件,变量都被当做html元素的属性处理了,故不能单纯的使用v-html来完成带有交互的后端字符排版文件。
target.classList; //v-html里假如有一个渲染类名为test的元素button if(classList.contains("test")){ //点击事件执行的逻辑 } //或者使用tagName来判断,但是这里要确定tagName是否唯一,所以个人感觉还是使用classList判断 // const tagName = e.target.tagName.toLowerCase() // if(tagName === "button")...