美文网首页
在vue中后台返回的文本包含标签时解析html代码

在vue中后台返回的文本包含标签时解析html代码

作者: 李小白呀 | 来源:发表于2021-07-03 23:55 被阅读0次

1.对于后台返回的数据中含有html标签需要解析成html标签

数据格式:

str = "<p>你好></p>" 

方法一:在html中解析(使用v-html):

<p v-html="str">{{str}}</p>

方法二:使用pre标签

<pre>{{str}}<pre>

样式white-space: pre-line 加上才会换行

.weekyContent pre{
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
  line-height: 28px;
  font-size: 16px;
  white-space: pre-line;
  margin: 0;
}

相关文章

网友评论

      本文标题:在vue中后台返回的文本包含标签时解析html代码

      本文链接:https://www.haomeiwen.com/subject/zyqrultx.html