vue.js - 分离条件渲染的开始和结束标签

Question

<template>
    <div>
        <template v-if="isFieldsetElement">
            <fieldset>
                <legend>Label Here</legend>
        </template>
        <template v-else>
            <label>Label Here</label>
        </template>

        <span> Description </span>
        <img src="image.png" />
        <div>more stuff here </div>

        <template v-if="isFieldsetElement">
            </fieldset>
        </template>
    </div>
</template>

我无法进行此标记分离。基本上我有一个单独的 header 和 footer(因为缺少更好的词)但是我不能像在服务器端生成的标记中那样在 Vue 中做到这一点。

这个问题是否有解决方法或更优雅的解决方案？

Answer 1

使用 Dynamic Components :

<component :is="isFieldsetElement ? 'fieldset' : 'div'">
    <component :is="isFieldsetElement ? 'legend' : 'label'">
        <span> Description </span>
        <img src="image.png" />
        <div>more stuff here </div>
    </component>
</component>