vue项目将后端返回的数据中P标签删除并换行展示

实现效果:

1.调取接口拿到后端数据后,其实this.lists里的contentDetails为我所要展示的字段

关键代码this.lists[i].contentDetails.replace(/<(\/)?p>/g, '<br/>')

将P标签替换为<br/>

2.用v-html渲染

  • 11
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A:要展示后端返回的树形数据,可以使用Vue的递归组件(recursive component)来实现。递归组件通过嵌套自身的方式来展示树形结构,这种方式非常适合展示树形数据。 首先,需要定义一个递归组件,并为递归组件传入数据。在组件内部,可以通过v-for指令遍历子节点,并通过递归组件的形式来展示子节点。具体的操作如下: 1. 定义递归组件: ``` <template> <div class="item"> {{ item.name }} <div v-if="item.children"> <tree-item v-for="child in item.children" :key="child.id" :item="child"></tree-item> </div> </div> </template> <script> export default { name: 'TreeItem', props: { item: { type: Object, required: true } }, components: { TreeItem: this } } </script> ``` 在递归组件的定义,首先展示当前节点的名称,然后通过v-if指令判断当前节点是否有子节点,如果有子节点,则通过循环遍历子节点,并将每个子节点传递给递归组件,以便展示子节点的信息。 2. 在父组件使用递归组件: ``` <template> <div> <tree-item v-for="item in treeData" :key="item.id" :item="item"></tree-item> </div> </template> <script> import TreeItem from './TreeItem.vue' export default { name: 'Tree', components: { TreeItem }, data () { return { treeData: [] } }, mounted () { // 从后端获取树形数据 axios.get('/api/getTreeData').then(res => { this.treeData = res.data }).catch(err => console.log(err)) } } </script> ``` 在父组件,先定义一个数据属性treeData来存储从后端获取的树形数据。在mounted钩子函数通过axios库向后端发送请求,获取树形数据,并将获取到的数据存储到treeData。然后,通过v-for指令遍历每个节点,并将节点传递给递归组件进行展示。 通过这种方式,就可以从后端获取树形数据,并在前端展示出来。同,由于使用了Vue的递归组件,这种方式还具有很好的可维护性,可以方便地增加或修改组件的结构和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值