关于v-html
在vue使用中，指令v-html渲染页面经常用到，类似于jQuery的$('x').html()去渲染。通过指令v-html渲染出来的内容还会带有原来的标签及其样式，如果需要修改或者重设其样式，应该如何去做吗？
采坑
首先，我在style中用子级选择器去选中并修改样式，经过猛如虎的操作后，并没生效。F12打开Elements调试，发现在style里面样式根本没加载上去，没有class中也没有类名出现。除此之外，渲染非该指令元素时，所有的类名会跟有[data-v-xxxxxx]的东西。
爬坑
解决方案
现给出3中方案来解决此问题：
- 去掉style中的
scoped; -
watch监测数据变化; - 深度选择器
>>>
方案1实践
去掉style中的scoped
在vue组件中，我们写style时，为了防止页面样式冲突，在每个组件中会加上scoped属性。经测试，去掉该属性即可渲染样式成功。但是在组件过多或者项目中大时，经常会出现页面样式冲突，因此该方法不建议使用。
方案2实践
watch监测数据变化
在script > export default中,watch属性可监听v-html所绑定值的变化。如果是后台请求的数据，那么可以在watch中监听改数据变化，当数据发生改变驱动视图后，动态绑定一个class来改变子级元素样式。此方法有一定局限性。
方案3实践
深度选择器 >>>
此时，深度选择器的应用则脱颖而出。深度选择器>>>，可深度改变子级样式。例：
<template>
<div class="test"></div>
</template>
<script>
// ***
</script>
<style scoped>
.test >>> *{
width: 100%;
}
</style>
如果使用scss或者less等css扩展语言，则用/deep/替代：
<style scoped type="text/scss" lang="scss">
.test{
/deep/ *{
width: 100%;
}
}
</style>
tips
scoped属性导致css仅对当前组件生效，而html绑定渲染出的内容可以理解为是子组件的内容，一般情况下子组件不会被加上对应的属性，所以不会应用带有scoped的css。
