<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中做到这一点。
对于这个问题，有没有一个变通方法或更优雅的解决方案？
使用动态组件：
<component :is="isFieldsetElement ? 'fieldset' : 'div'">
<component :is="isFieldsetElement ? 'legend' : 'label'">
<span> Description </span>
<img src="image.png" />
<div>more stuff here </div>
</component>
</component>
我无法进行此标签分离
这是对的，因为Vue使用一个完整的文档模型，所以你不能按的部分将元素组合在一起
我会选择自定义包装组件。类似。。。
<template>
<div> <!-- single root element required -->
<fieldset v-if="wrap">
<legend>{{ label }}</legend>
<slot></slot>
</fieldset>
<template v-else>
<label>{{ label }}</label>
<slot></slot>
</template>
</div>
</tenmplate>
<script>
export default {
name: 'FieldWrapper',
props: {
wrap: Boolean,
label: String
}
}
</script>
并像一样使用它
<FieldWrapper :wrap="isFieldsetElement" label="Label Here">
<span> Description </span>
<img src="image.png" />
<div>more stuff here </div>
</FieldWrapper>
组件中有一点<slot>的重复，但对于您的用例，我认为这是可以接受的。
JSFiddle演示
PHP的输出是一个字符串，所以您可以将其设置为''+'hello'+'，但对于JS框架，他们使用了HTMLElement，所以您不能在这里做同样的事情。我认为你需要习惯使用这个组件，还有PHP。示例：
<?php
class View() {
public $header; public $footer; public $content;
}
$view = new View(); $view->header = 'Hello';...
?>
<html>
<body>
<header>
<?php echo $view->header?>
</header>
<div id="root">
<?php echo $view->content?>
</div>
<footer>
<?php echo $view->footer?>
</footer>
</body>
</html>
对于上面的源，页眉、页脚和内容都意味着一个组件，而内容通常有多个子组件。
所以，标签分离从来都不是一个好的解决方案，包括PHP模板。
<template>
<div>
<template v-if="isFieldsetElement">
<fieldset>
<legend>Label Here</legend>
<span> Description </span>
<img src="image.png" />
<div>more stuff here </div>
</fieldset>
</template>
<template v-else>
<label>Label Here</label>
<span> Description </span>
<img src="image.png" />
<div>more stuff here </div>
</template>
</div>
</template>
或者与您在php中所做的相同的其他方式：
var app = new Vue({data:{html:'<div>Hello</div>'}});
<template v-html="html"></template>