请求接口,后台返回的数据中,包含标签时候解析为html代码

本文探讨了在Vue.js、原生JavaScript和jQuery中如何解析后台接口返回包含HTML代码的数据,分别在不同场景下提供了相应的处理方法。
摘要由CSDN通过智能技术生成

一: 在vue中的时候:

// 后台返回数据:
sharePic: (...)
sort: (...)
status: (...)
template: "<p class="ql-align-justify"><strong>关于2020年国庆节、中秋节放假安排的通知</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-justify">根据国务院办公厅通知精神,现将2020年国庆节、中秋节放假安排通知如下:</p>"
updateTime: (...)
viewNumber: (...)

 // methods 中写方法获取后台返回数据

this.str = resqust.data.template


//在html中解析:
<p v-html="str">{{str}}</p>  备注:不只是标签可以使用  v-html 哟 !!!!

二: 原生js

// ajax 请求获取后台返回数据
sharePic: (...)
sort: (...)
status: (...)
template: "<p class="ql-align-justify"><strong>关于2020年国庆节、中秋节放假安排的通知</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-justify">根据国务院办公厅通知精神,现将2020年国庆节、中秋节放假安排通知如下:</p>"
updateTime: (...)
viewNumber: (...)
// 意思是这个类里面的内容就会是从后台获取到的这个数据
const str = res.data.template
document.getElementsByClassName(“classname”).innerHTML = str

三 : jq

// ajax 请求获取后台返回数据
sharePic: (...)
sort: (...)
status: (...)
template: "<p class="ql-align-justify"><strong>关于2020年国庆节、中秋节放假安排的通知</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-justify">根据国务院办公厅通知精神,现将2020年国庆节、中秋节放假安排通知如下:</p>"
updateTime: (...)
viewNumber: (...)
// 方法三: 用 jquery 解析 html 代码:
const str = res.data.template
$(".classname").html(str);
// 这个跟用 jquery 解析 是一样的道理,只是更简洁,方便

//如有不对,望指教,谢谢!!!!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值