Vue使用v-html输出的样式无法更改

Vue渲染到html元素的数据时使用v-html输出解析

下面json的数据

[
 {
    "id": 100,
    "keyword": "手机壳",
    "title": "<i>天猫</i><i>年终盛典</i>手机壳 北京热销过万 苹果11iPhoneProMax放摔Pro保护套",
    "s1": "店铺已被69.7万人圈粉|累积好评9万+",
    "money": 66,
    "total":34866,
    "label":
      "<span class='zlf_eee'>广告</span><strong class='zlf_vip' ><span>88VIP</span>9.6折</strong><span class='zlf_pink',>每300减30</span><span class='zlf_orange'>包邮</span>"
    ,
    "area": "深圳",
    "shop": "ranvoo旗舰店",
    "url": "shou_03.jpg"
  }
]

在vue中输出label或title的内容必须时使用v-html输出解析html标签

问题来了:

1.去掉style标签中的scoped属性!(注意类名一样会污染全局样式,用时慎重)可以设置样式
style使用了scoped属性 这时候需要使用 >>>
语法:

div >>> p {
        color: red;
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,139评论 1 4
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,721评论 0 0
  • 一个web应用是离不开html、css与js,其中css充斥的整个web项目中。css它有一个特定,它是全局的。这...
    午后一小憩阅读 9,883评论 3 12
  • 本文发布在我的博客vue中慎用style的scoped属性许可协议: 署名-非商业性使用-禁止演绎4.0国际 ...
    2ue阅读 12,977评论 2 7
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 8,669评论 0 25