vue.js - 在 vue.js 的 UL 中渲染 LI。有隐形标签吗？

Question

如何在 vue 中从 v-for 中渲染 li。

我想做这样的事情。

<ul class="list-unstyled">
    <span v-for="(item, name) in lineItem.properties" v-html="item"></span>
</ul>

但我显然不希望跨度被渲染，因为 item 很可能会带回多个 li。在我的例子中，item 会返回已经渲染成一个 li 的 li 内容。

非常感谢。

标签： vue.js

Answer 1

你需要使用这个https://github.com/Thunberg087/vue-fragment#readme

<ul class="list-unstyled">
    <fragment v-for="(item, name) in lineItem.properties" v-html="item"></fragment>
</ul>

ps 如果您使用的是 vue 3，您甚至不需要安装库，它是开箱即用的！ https://v3.vuejs.org/guide/migration/fragments.html