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>

Answer 2

我无法执行此标签分离

是正确的，因为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 Demo

Answer 3

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>

分隔开始和结束标签以进行条件渲染

3 个答案: