后端返回富文本<p><strong>臧龙政<u>,zlz1</u><em><span class="ql-cursor"></span></em></strong></p>前端vue2项目怎么在页面上面展示,怎么写。
时间: 2024-04-06 13:26:23 浏览: 31
在前端Vue2项目中展示后端返回的富文本可以通过使用Vue的插值表达式和v-html指令来实现。
首先,你需要在Vue组件中定义一个数据属性来存储后端返回的富文本内容。例如,在data选项中添加一个名为"richText"的属性:
```javascript
data() {
return {
richText: '<p><strong>臧龙政<u>,zlz1</u><em><span class="ql-cursor"></span></em></strong></p>'
}
}
```
然后,在模板中使用插值表达式和v-html指令将富文本内容渲染到页面上。在模板中找到要展示富文本的位置,并使用双花括号包裹插值表达式,同时在插值表达式前面添加v-html指令:
```html
<template>
<div>
<div v-html="richText"></div>
</div>
</template>
```
这样,Vue会将富文本内容作为HTML解析并渲染到页面上。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)