首页 > Web开发 > 详细

v-html的问题及解决办法

时间:2021-08-19 14:44:07      阅读:19      评论:0      收藏:0      [点我收藏+]

1、v-html和v-text(简写:{{}})相比,可以识别字符串中的标签

  data() {
    return { html1: ‘<p>HTML1</p>‘ }
  }
    <p v-html="html1"></p>
    <p v-text="html1"></p>
    <p>{{html1}}</p>

  结果:

    技术分享图片

2、v-html会覆盖当前标签内的子元素

    <div v-html="html1">
      <h1>标题</h1>
    </div>

  结果:

    技术分享图片

3、样式问题:scoped的样式不会应用在v-html内部,因为v-html的内容没有经过vue的模板编译器处理

  解决办法:

    ①使用scoped时用深度选择器(>>>),scss和less使用 /deep/

  data() {
    return { html1: ‘<p class="my-p">HTML1</p>‘ }
  }
    <div v-html="html1"></div>
<style lang="less" scoped>
#app {
  /deep/ .my-p {
    color: red;
  }
}
</style>

    ②不使用scoped,另写一个style标签针对全局样式,这里要使用BEM命名规则

<style lang=‘less‘>
#app {
  .my-p {
    font-size: 30px;
  }
}
</style>

4、XSS

 

v-html的问题及解决办法

原文:https://www.cnblogs.com/wuqilang/p/15161080.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!