Vue中v-html会 导致哪些问题 (vue 11)
vue的v-html指令使用注意事项:V-html更新的是元素的 innerHTML 。内容按普通 HTML 插入, 不会作为 Vue 模板进行编译 。但是有的时候我们需要渲染的html片段中有插值表达式,或者按照Vue模板语法给dom元素绑定了事件;使用v-html需要注意的第二个问题是:在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被...
vue的v-html指令使用注意事项:
-
V-html更新的是元素的 innerHTML 。内容按普通 HTML 插入, 不会作为 Vue 模板进行编译 。但是有的时候我们需要渲染的html片段中有插值表达式,或者按照Vue模板语法给dom元素绑定了事件;
-
使用v-html需要注意的第二个问题是:在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局
第一种解决方案,照样使用scoped,但是我们可以使用深度选择器(>>>),示例如下:
<style scoped>.a >>> .b{/* ... */}</style>
以上代码最终会被编译为:
.a[data-v-f3f3eg9] .b{/* ... */}
但是这里需要注意,当你的vue项目使用less或者sass的时候,>>>这个玩意可能会失效,我们用/deep/来代替,代码如下:
.a {
/deep/ .b{/* ... */}
}
第二种解决方案,单文件组件的style标签可以使用多次,可以一个stlye标签带scoped属性针对当前组件,另外一个style标签针对全局生效,但是内部我们采用特殊的命名规则即可,例如BEM规则。
以上便是在使用vue开发时使用v-html需要注意的地方。
可以参考:传送门在这里,自己去看!
更多推荐
所有评论(0)