vue项目用富文本展示从后端请求到的图片和文字
时间: 2023-12-14 14:35:39 浏览: 47
你可以使用第三方富文本编辑器,例如`Quill`或`Vue-Quill-Editor`,来展示从后端请求到的图片和文字。这些富文本编辑器都提供了一个`v-model`属性,用于绑定富文本编辑器的内容,因此你可以将从后端请求到的富文本内容赋值给该属性。
以下是一个使用`Vue-Quill-Editor`的示例:
1. 安装`vue-quill-editor`
```
npm install vue-quill-editor --save
```
2. 在Vue组件中引入和注册`Vue-Quill-Editor`
```javascript
<template>
<div>
<quill-editor v-model="content"></quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data () {
return {
content: '' // 从后端请求到的富文本内容将赋值给该属性
}
}
}
</script>
```
3. 在`mounted`钩子中请求后端数据,并将响应结果赋值给`content`
```javascript
mounted() {
axios.get('/api/content')
.then(response => {
this.content = response.data
})
.catch(error => {
console.log(error)
})
}
```
这样就可以展示从后端请求到的富文本内容了,包括图片和文字。