在vue中后台返回的文本包含标签如何解析为html

在项目中遇到解析html，发现v-html并不满足复杂的渲染，就使用jq来处理
1.v-html 处理简单的标签
如：text= " <p>vue转换</p> "
html中解析：

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

2.返回标签中还有img、a标签，使用v-html就不会转换方法如下：

使用jquery处理:
1.在标签定义class

  <div  class="descript"></div>

2.安装jq

npm install jquery --save

3.在使用的地方引入

import $ from 'jquery'


 async loadProductDetail(cData) {
      const { data } = await getProductDetail(cData)
      this.descript = data.data.sku //接口返回数据赋值
      this.loadhtml()   //调用方法
    },
loadhtml() {
 $('.descript').html('')     //获取class类的html
 $('.descript').html(this.descript)   //赋值
 const srcdescript = $('.descript').find('a') || $('.descript').find('img')  //找到当前所有的a标签、img标签
for (let i = 0; i < srcdescript.length; i++) {   //遍历
        let a = srcdescript.eq(i).attr('href')      //找到a标签的href属性
       let b = evals.eq(i).attr('src')   //找到img标签的src属性
          //this.$url是我添加的端口号:
            srcdescript.eq(i).attr('href', this.$url + a)     //赋值
            srcdescript.eq(i).attr('src', this.$url + b)    //赋值
          //如果接口返回有就不添加:
          // srcdescript.eq(i).attr('href', a)     //赋值
            //srcdescript.eq(i).attr('src',  b)    //赋值
      }
}

end
以上就是关于vue中HTML解析
如有问题，欢迎留言告知，感谢~
喜欢的小伙伴可以点赞呦