Question

我循环浏览我的页面组件。问题在于，该循环会省略<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>"
]

Answer 1

如您在官方文档https://vuejs.org/v2/guide/syntax.html#Raw-HTML中所看到的那样，如果不使用v-html而不包装一些标签是不可能的。

您可以做的是以这样的方式重新排列数组：它为您提供整个块，而不是像

这样的单独标签

MapRoute

并将其包装在span或div中。

VueJs在for循环中显示html而不包含元素

1 个答案: