vue给标签动态添加元素_vue中用v-html加载html元素及三种方法给v-html元素添加样式（详解）...

在写商城项目，关于图文介绍的商品详情，后台用了富文本，前端接收到的是一个一个html标签的字段，vue如何解析html元素呢？百度一下，很简单，一个v-html标签搞定！

下面以具体的例子介绍如何使用？

introduction: "

• ↵
• 款式: 运动休闲鞋 ↵

↵ ↵

高帮款送增高鞋垫1双/袜子1双/除味香包1包

↵ ↵

赠品款式和颜色随机派送

↵"

introduction这个字段就是后台返回html标签元素，用v-html一行代码搞定加载上述html元素展示：

但是发现有问题，后台返回图片太大，宽度超过了屏幕宽度时，页面可以滑动，所以我们要控制图片，找到html元素中的img，然后设置img的样式。

.introduction{

width: 100%;

margin-bottom: 3rem;

}

.introduction img{

width: 100%;

object-fit: fill;

}

以为容易找到img标签，按照上述就可以改变样式，可是不行，根本找不到对应的img标签。因为scoped属性导致css仅对当前组件生效，而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以这样无效。

以下三种方式可以解决：

一、去掉

通过scoped属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。去掉scoped时，发现影响页面布局很大，这种方式不可取。

简单介绍下scoped 的实现原理：

vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

.example {

color: red;

}

你好

转译后：

.example[data-v-5556841b] {

color: red;

}

你好

即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

二、定义两个style标签，一个含有scoped属性，一个不含有scoped属性

可以这样写样式：

.introduction{

width: 100%;

margin-bottom: 3rem;

}

.introduction img{

width: 100%;

object-fit: fill;

}

不改变原来的基础上，在需要的地方添加一个不含有scoped属性即可！这样可以解决，但是显的代码过于繁琐。

三、通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值

外层 >>> 第三方组件 {

样式

}

上述为模板，以此为例的改变样式为：

.introduction{

width: 100%;

margin-bottom: 3rem;

}

.introduction>>> img{

width: 100%;

object-fit: fill;

}

这种方式很容易解决上述的问题，以后在遇到引入第三方样式需要修改时，可以用这种方法完美解决。

本文独发金蝶云社区