vue.js使用v-html插入模版，绑定事件v-on:click事件不能触发，被当做字符串解析问题...

最新推荐文章于 2023-11-16 14:23:00 发布
最新推荐文章于 2023-11-16 14:23:00 发布
阅读量2k 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：http://www.cnblogs.com/minna123/p/6894534.html
版权

 
 
 
这里第三行和第四行的<a>标签分别是用v-html加进去的和直接写死绑定的事件，很明显看到第三行的a标签绑定的click 被当成字符串解析了，点击事件没有任何的作用，这里是因为v-html里的东西，调不到this.methods的东西，因为methods里的代码是编译后在浏览器里运行的，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
当然官网本身也不建议使用v-html，安全性考虑，不过解决这个问题可以使用事件代理来解决，把事件绑定到父元素上即可，但鉴于当时的需求我正是要判断什么样的需要点击，什么的不需要点击，所以最后我是用了v-if实现的想要的渲染效果。

转载于:https://www.cnblogs.com/minna123/p/6894534.html

weixin_30632089
关注
vue2 --- vue模板语法中的语法和指令语法，v-bind指令、v-model双向数据绑定、v-on事件绑定
持之以恒
09-13 231
vue模板语法中的插值语法和指令语法，v-bind指令、v-model双向数据绑定、v-on事件绑定
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 使用v-html插入模版，绑定事件v-on:click事件不能触发,以及子组件无法渲染
热门推荐
weixin_40057800的博客
05-18 1万+
在用vue做项目中，发现了一个问题: 当想利用v-html将模板渲染到页面中的时候，发现模板中通过v-on:click绑定的事件不能触发，而且模板中引用的子组件也不能渲染成功 ![v-html模板中用到的子组件audio-play](https://img-blog.csdnimg.cn/20190518160511763.png?x-oss-process=image/watermark,typ...
vue html绑定点击事件,vue实现在v-html的html字符串中绑定事件
weixin_36146057的博客
06-05 2356
vue实现在v-html的html字符串中绑定事件需求：需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。computed: {html () {return ''},},解决办法：在v-html同级元素中使用事件绑定，然后根据事件触发的目标对象去判断和获取参数。add...
VUE解决 v-html不能触发点击事件的问题
10-16
这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视为静态内容，不会进行编译和绑定。本文将详细介绍这个问题的背景、原因以及解决方案。 **问题背景：** 在某些场景下，后端可能会返回HTML...
vue.js v-on事件使用，vue.js event事件绑定
05-03
在Vue模板中，我们可以使用`v-on`指令监听DOM事件，然后调用Vue实例中的方法来处理这些事件。例如： ```html <button v-on:click="handleClick">点击我 ``` 在这个例子中，当用户点击按钮时，`handleClick`方法会被...
vue在v-html的html字符串中绑定事件
sayoko06的博客
02-01 1万+
需求： 需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。 &lt;div class="code-review"&gt; &lt;div v-html="html" v-highlight @click="addComment($event)"&gt;&l...
Vue中的字符串模板的使用
12-09
1、HTML模板和字符串模板 HTML模板：直接在HTML页面挂载的模板。（即非字符串模板） 非字符串模板：在单文件里用 指定的模板，换句话说，写在 html 中的就是非字符串模板。 字符串模板：在js字符串中定义的模板。 2、Props属性：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名)： （1）、HTML模板： Vue.component('child', { // 在 JavaScript 中使用 camel
如何在Vue模板中绑定事件？
2301_77795034的博客
06-05 2161
如果你使用的是addEventListener()方法注册的事件处理程序，你可以在需要阻止事件的传递的事件处理程序中调用event.preventDefault()或event.stopPropagation()来达到同样的效果。如果你在一个非顶层元素上注册了一个事件处理程序（比如一个button元素），并且你想在这个元素上使用event.preventDefault()或event.stopPropagation()来阻止事件的传递，你必须在这个元素上注册事件处理程序而不是在它的父元素上注册。
vue在模板字符串html结构里绑定事件
yiyiziupupup的博客
11-16 750
vue在模板字符串html结构里绑定事件。
vue 在 v-html 的 html 字符串中绑定事件以及获取 v-html 渲染出来的元素
qq_37672347的博客
12-03 3151
html <div id="father" @click="handleHtml($event)"> <div id="vhtml" v-html="content" /> </div> js 在v-html同级元素中使用事件绑定，然后根据事件触发的目标对象去判断和获取参数。 handleHtml($event) { console.log($even...
vue 模板字符串里添加html并绑定点击事件
weixin_40141473的博客
07-10 6582
在Vue中，我们经常会使用模板字符串。当然，现在的模板字符串使用方法也越来越多。 在项目中，经常会遇到一个问题，就是需要在模板字符串中，写一个html元素，如下： let contentStr = `<p>我是模板字符串，点击我。</p>` 如果需要在点击该html元素时，触发点击事件，那么把模板字符串改成： let contentStr = `<p onclick="clickFun()">我是模板字符串，点击我。</p>` // 注意，是onc
html click事件 参数,vue 实现click同时传入事件对象和自定义参数
weixin_29476357的博客
06-05 1245
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧仅仅传入自定义参数HTMLdddddJS代码new Vue({el:'#app',methods:{tm:function(e){console.log(e);}}})仅仅传入事件对象HTMLdddddJS代码new Vue({el:'#app',methods:{t...
vue.js：使用v-html绑定HTML代码案例
零小唬的博客
12-28 1516
vue.js：使用v-html绑定HTML代码案例
Vue 中动态Html片段绑定事件
蜗牛快爬
05-27 2317
Vue 中动态Html片段绑定事件 最近项目中地图开发遇到了动态html中添加事件，打开新的组件的需求，如果用vue中this.fun应该是行不通，没有作用域（试了确实不行）。 但是仔细想想，所有的vue组件最后都会被转成html段，如果我们把方法转成当前组件全局的方法，是不是直接通过方法名就可以绑定事件了，有点类似于定义一个全局的变量var a;下面直接使用a就行。当让方法也可以使用这种方式var aa=fun(){ },但是这个有个问题就是获取不了组件内的数据，所以尽量在vue组件的方法内进行全局绑定。
Vue通过js代码调用vue实例，解决v-html字符串里存在点击事件无效的问题
Oscrazy的博客
05-27 1079
方法适用Vue.js和Vue-cli 先来说一下我的应用场景, 使用leaflet地图时, 点击地图的标注点弹出一个信息框, 里面有个按钮, 这时问题就来了, 这个api是需要传一段html进去的, 里面包含调用vue实例的方法 res.data.forEach(item => { this.markerPoint(item.locs[0].lat, item.locs[0].lng, carMakerIcon, ` <h2 style="text-align:
vue.js怎么使用v-bind来绑定input的type类型为status，接着利用status来修改input的type类型，将input由文本框修改为密码框
最新发布
09-21
在Vue.js中，你可以使用`v-bind`指令来动态地绑定元素属性，包括`type`属性。假设你有一个数据属性`status`，你想控制一个输入框的显示类型，可以这样做： ```html <input type="text" v-bind:type="status === '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值