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 的内容设置带作用域的 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需要注意的地方。

可以参考：传送门在这里，自己去看！

Vue中v-html会导致哪些问题（vue 11）相关推荐

vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
vue中因数据延迟导致echarts无法渲染问题
编写一个echart组件,只需传值就可用,如果数据变化使用watch监听重新渲染echarts <template><div id="echarts_bazaar" ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...

Vue中v-html会导致哪些问题（vue 11）

Vue中v-html会导致哪些问题（vue 11）相关推荐

最新文章

热门文章

Vue中v-html会 导致哪些问题 （vue 11）

Vue中v-html会 导致哪些问题 （vue 11）相关推荐

最新文章

热门文章

Vue中v-html会导致哪些问题（vue 11）

Vue中v-html会导致哪些问题（vue 11）相关推荐