首先,在Vue组件中,使用v-html指令将HTML内容动态渲染到模板中。例如,可以将一个包含点击事件的HTML字符串赋值给一个data属性,然后在模板中使用v-html指令将其渲染出来。 接下来,为了在v-html渲染的HTML内容上绑定click事件,需要使用Vue的事件修饰符。事件修饰符是以"@"符号开头的指令,用于监听DOM事件。 在模板中...
添加click点击事件: 在v-html所在标签外的标签进行绑定,通过event来判定点击到哪个标签,也就是说事件不要绑定在v-html所在的标签 <div@click="clickHtml"><divv-html="html"></div></div> clickHtml(e) { if (e.target.id === "99") { XXXXX } }...
target.classList; //v-html里假如有一个渲染类名为test的元素button if(classList.contains("test")){ //点击事件执行的逻辑 } //或者使用tagName来判断,但是这里要确定tagName是否唯一,所以个人感觉还是使用classList判断 // const tagName = e.target.tagName.toLowerCase() // if(tagName === "button")...
<div style="font-size: 12px;" @click.native="onZyInfo(item)" v-html="formatEscapeChar(item.attachmentContent)"></div> </div> </template> methods:{ onZyInfo(item){ } }
<main><divref="HTML"></div></main><script>created() {this.createHtml(); },methods: {cesi1() {// 这里是因为v-html里的东西,调不到this.methods的东西,因为methods里的代码是编译后在浏览器里运行的,// 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。alert("这里不会调用"); },create...
这里第三行和第四行的<a>标签分别是用v-html加进去的和直接写死绑定的事件,很明显看到第三行的a标签绑定的click 被当成字符串解析了,点击事件没有任何的作用,这里是因为v-html里的东西,调不到this.methods的东西,因为methods里的代码是编译后在浏览器里运行的,内容按普通 HTML 插入 - 不会作为 Vue 模板进行...
需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效。 <divclass="code-review"> <div v-html="html"v-highlight@click="addComment($event)"></div> ...
【Vue】利用Vue绑定Html元素事件(如:click)综合示例 一、绑定按钮单机事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
1、要嵌入到vue代码中的部分html代码 双击图片会调用imgDbClick方法，此方法为html里面的方法。<img ...
console.log(pro.getAttribute('name')); // 获取html元素属性值 1. 2. 3. 4. 5. 6. 7. 8. 9. 二、如果click事件传参数,需要设置$event来获取。 <div class="bar_menu" v-on:click="showInfo(1,$event)" name="1"></div> <script type="text/javascript"> ...