在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(this.descript) //赋值

const srcdescript = ('.descript').find('img') //找到当前所有的a标签、img标签

for (let i = 0i <srcdescript.lengthi++) { //遍历

let a = srcdescript.eq(i).attr('href') //找到a标签的href属性

let b = evals.eq(i).attr('src') //找到img标签的src属性

//this. url + a) //赋值

srcdescript.eq(i).attr('src', this.$url + b)//赋值

//如果接口返回有就不添加:

// srcdescript.eq(i).attr('href', a) //赋值

//srcdescript.eq(i).attr('src', b)//赋值

}

}

对于 vue 来说，模板本质就是一个字符串

vue 中的模板是有逻辑的，是动态的，如 v-if、v-for 等

与 html 格式很像，但有很大区别；html 是静态的，而 vue 模板是动态的

最终还是要转化为 html 来显示，怎么才能转换为 html 来显示呢？

模板最终必须转换为 JS 代码？

因为模板有逻辑 (v-if,v-for)，必须用 JS 才能实现(前端中只有 JS 是图灵完备语言）

转换为html渲染页面，必须用 JS 才能实现渲染

因此模板最终要转换为一个 JS 函数(render 函数)，（render 函数是指的渲染函数，并不一定就必须是 render 这个名字）

render函数

render 函数的 with 的用法

模板中，所有信息都包含在了 render 函数中

this 即 vm

price 就是 this.price，也是 vm.parice，也是 data.price

---