代码之家 › 专栏 › 技术社区 › eozzy

分离条件呈现的开始和结束标记

vue-component vuejs2 vue.js

1

eozzy · 技术社区 · 7 年前

<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中这样做。

对于这个问题,有没有解决方法或更优雅的解决方案?

3 回复 | 直到 7 年前

1

3

eozzy 7 年前

使用 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>

2

1

Phil 7 年前

我不能做这个标签分离

这是正确的,因为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

3

1

Nick Wang 7 年前

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>

对于上面的源,页眉,页脚,内容都是一个组件,内容通常有很多子组件。

<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>