vue动态插入内容 v-html 的样式无效解决方法

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;
			}

仅笔记，便查阅