时间戳

首页 > 解决方案 > VueJs在没有元素的for循环内显示html

vue.js - VueJs在没有元素的for循环内显示html

问题描述

我循环通过我的页面组件。问题是循环省略了 <div class="wp-block-columns">例如<div><div class="wp-block-columns"></div>

有没有一种方法可以让我循环并执行此操作<div v-if="item.substring(0,10) !== 'component-'" v-html="item"></div>而无需在另一个周围输出 div？

怎样才能做到这一点？

页面组件：

    <template v-for="item in json.content">
        <component v-if="item.substring(0,10) === 'component-'" :is="item"></component>
        <div v-if="item.substring(0,10) !== 'component-'" v-html="item"></div>
    </template>

将转换为 json 的数据 php 数组：

array:13 [▼
    1 => "<div class="wp-block-columns">"
    2 => "<div class="wp-block-column col-md-6" style="flex-basis:33.38%">"
    3 => "<p>111</p>"
    4 => "</div>"
    8 => "<div class="wp-block-column col-md-6" style="flex-basis:33.63%">"
    9 => "<p>222</p>"
    10 => "</div>"
    14 => "<div class="wp-block-column col-md-6" style="flex-basis:33%">"
    15 => "<p>333</p>"
    16 => "</div>"
    17 => "</div>"
    20 => "component-adreswidget"
    23 => "<p>test</p>"
]

标签： vue.jsvuejs2

解决方案

正如您在官方文档https://vuejs.org/v2/guide/syntax.html#Raw-HTML中看到的那样，如果不包装某些标签，就无法使用 v-html 。

你可以做的是以这样的方式重新排列你的数组，它给你整个块而不是单独的标签

array:13 [▼
    1 => `<div class="wp-block-columns">
          <div class="wp-block-column col-md-6" style="flex-basis:33.38%">
          <p>111</p> </div>
         </div>`
    2 => "component-adreswidget"
    3 => "<p>test</p>"
]

并将其包装在 span 或 div 中。

推荐阅读