这几天用vue开发前端，在v-html中使用的样式不起作用，代码如下所示：

<table class="table"  v-html="table_data"   width="100%">
     {
   {table_data}}
</table>
  <script>
  export default {
   data(){        
    return{
            table_data:" <div class=\"tb_nodata\">测试 </div>"
            }
    }
    }
   </script>
    <style scoped>
      .tb_nodata{
       font-size: 20px;
       color: #0c08fc;
} 
    </style>

        找了很久问题，最后才发现，原来style不能像上面那么写，要像下面这样写：

<table class="table"  v-html="table_data"   width="100%">
        {
   {table_data}}
  </table>
  <script>
  export default {
   data(){        
    return{
            table_data:" <div class=\"tb_nodata\">测试 </div>"
            }
    }
    }
   </script>
    <style scoped>
      .table >>>.tb_nodata{
       font-size: 20px;
       color: #0c08fc;
} 
    </style>

        这里用到了样式穿透设置样式既>>>才使样式生效了，如果class父级还有class就不能直接访问来定义样式了，要通过样式穿透来定义样式，就像上面定义的那样.table >>>.tb_nodata。

        通过以上内容我们知道了vue的v-html样式不生效的问题如何解决？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！