vue v-html 动态内容样式无效解决方法
今天项目遇到一个通过document 插入的一段html标签的样式不起作用，代码如下：
for(...){
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var img = document.createElement('img');
img.src = this.tableSum[ i ].image;
element.appendChild( img );
}
//style样式
.element {
width: 130px;
height: 130px;
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
font-family: Helvetica, sans-serif;
text-align: center;
line-height: normal;
cursor: default;
}
样式是不生效的！
解决方法：
通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是可以通过深度作用选择器来为他们设置样式。前面加 ‘>>>’，就完美解决了
>>>.element {
width: 130px;
height: 130px;
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
font-family: Helvetica, sans-serif;
text-align: center;
line-height: normal;
cursor: default;
}
仅笔记，便查阅
