本文介绍: 通过官方文档可以得知两个重点:① 通过v–html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v–html插入的html@click、v–if等,则不会生效,因为他们没有被Vue编译,而浏览器并不会识别这些vue语法,所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性,那么该标签内的样式就不会对v–html生成的页面元素起作用,还是因为这些元素没有被当做Vue模板进行编译,所以不生效。
一、简介
官方文档:
① 通过v-html
生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html
代码被插入,也就是说通过v-html
插入的html
代码中,如果包含vue的语法,例如:@click
、v-if
等,则不会生效,因为他们没有被Vue编译,而浏览器并不会识别这些vue语法,所以这些语法都不生效。
② 在.vue
文件中如果style
标签上增加了scoped
属性,那么该标签内的样式就不会对v-html
生成的页面元素起作用,还是因为这些元素没有被当做Vue模板进行编译,所以不生效。
如果在某些业务场景下我们给v-html
生成的页面元素绑定了@click
事件,需要触发某些处理方法,或者需要给这些元素设置CSS样式时,这两个问题就比较致命了,所以我们要想办法去解决这俩问题。
解决绑定事件失效方法有:使用onclick
等原生事件代替@click
等事件vue事件、利用事件委托触发事件、使用component
模板代替v-html
。
解决样式不生效的方法有:/deep/
、::v-deep
、>>>
、:deep
、额外的全局<style>
。
二、解决@click等vue事件不触发
1、使用onclick
等原生事件代替@click
等vue事件
具体代码:
2、利用事件委托触发事件
具体代码:
调用结果:
3、使用component模板代替v-html
具体代码:
调用结果:
3、解决样式不生效的问题
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。