这是js文件的部分代码:
//左侧设备状态列表
'<div class="real_trafficRight">'+
'<p class="realTrafficList-title">设备状态列表</p>'+
'<table class="real_trafficRight_table">'+
'<tr v-for="(items,id) in deviceStates" @mouseenter="deviceStateMouseEnter(id)" :class="{sys_set_li_active:id==isDevStaMouEn}" >'+
'<td class="real_trafficRight_td">{{items[0]}}</td>'+
'<td>{{items[1]}}</td>'+
'</tr>'+
'</table>'+
'</div>'+
这是CSS文件的样式文件:
//左边设备状态相关样式
.real_trafficRight{
position: absolute;
top: 11%;
background-color: #000000;
color: #fff;
z-index: 1;
border: #0e90d2 2px solid;
width: 12%;
}
.real_trafficRight_ta{
line-height: 20px;
text-align: center;
font-size: 15px;
width: 98%;
margin: 3px;
}
运行结果:
浏览器可以解析到real_trafficRight_ta这个样式,但解析不到real_trafficRight的样式。
找了半天错误,就是CSS文件的注释不是//eg://左边设备状态相关样式
而是<!-- --!>或者/* */.
由于注释习惯,给自己挖了个坑!!!!