Vue的v-html样式无效问题

深藏阁楼爱情的钟 2021-09-29 04:54 1924阅读 0赞

**\#\# 例如我在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>

正确代码：

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

![在这里插入图片描述][20190703122305494.png]  
**格式为： .table >>>.tb\_nodata\{ 。。。\}，就可以生效了**

其他外部组件引入，都要使用 “>>> “’这种语法。

[20190703122305494.png]: /images/20210726/2e76ad584a504633840689cc577ab789.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1924人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular7中渲染html数据，解决样式无效问题

angular项目中，往页面上渲染html数据的时候，使用的是\[innerHTML\]来渲染，一般渲染富文本中的Html数据，比如新闻详情之类。但是发现，渲染之后，没有...

快来打我*/ 2024年04月17日 05:38/ 0 赞/ 45 阅读

相关 css添加scoped后的样式无效问题

css添加scoped后会编译出版本号 ![在这里插入图片描述][20201228181658245.png] 如果在添加scoped的style中更改UI组件库中的组

淩亂°似流年/ 2022年12月31日 06:18/ 0 赞/ 239 阅读

相关解决vue中样式标记为Scoped时，element plus修改css样式无效的问题

在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。但是同时，scoped也会阻碍我们修改第三方

Myth丶恋晨/ 2022年12月30日 10:53/ 0 赞/ 531 阅读

相关在vue-cli中关于修改elementUI样式无效的解决方法（最新）

平时在使用element开发时，难免需要修改其样式，有时修改不起作用，在vue-loader文档中中给出了解决方法：深度作用选择器（其实就是样式穿透） >>>

矫情吗；*/ 2022年12月11日 13:52/ 0 赞/ 383 阅读

相关 vue style样式中scoped无效解决方案

如果你使用的是import方法导入样式后无效，解决方案如下： // 第一种（最快捷）将 <style scoped> @import '.

àì夳堔傛蜴生んèń/ 2022年11月27日 10:29/ 0 赞/ 555 阅读

相关 Canvas设置样式无效导致圆变成椭圆的问题研究剖析

Canvas设置样式无效导致圆变成椭圆的问题研究剖析，如下面代码段。 <!DOCTYPE html> <html lang="en"> <head>

秒速五厘米/ 2022年09月03日 12:24/ 0 赞/ 174 阅读

相关 JSP 导入CSS样式无效

错误原因： CSS是从客户端加载的，也就不能访问WEB-INF下的内容 CSS,JS,IMG等静态文件不要放在WEB-INF下 CSS,JS,IMG等静态文件不要放

落日映苍穹つ/ 2022年06月15日 09:43/ 0 赞/ 220 阅读

相关 vue-router的link样式设置问题

发现router-link添加上去后文字上会出现下划线，打开调试工具发现router-link其实是由a来实现的，在reset的时候 a { text

缺乏、安全感/ 2022年05月08日 08:48/ 0 赞/ 224 阅读

相关 vue-quill-editor 样式问题

> 问题：vue-quill-editor 样式问题解决：引入snow.css，在需要展示的页面中用如下元素包裹即可 <div class="ql-contain

短命女/ 2022年03月15日 10:18/ 0 赞/ 394 阅读

相关 Vue的v-html样式无效问题

\\ 例如我在vue中添加了如下的v-html：样式无效代码： <table class="table" v-html="table_data" width

深藏阁楼爱情的钟/ 2021年09月29日 04:54/ 0 赞/ 1925 阅读