有条件地渲染父元素,保持内部html

Question

有条件地显示父元素是否有任何内置方式？

为了显示:

<a v-show-but-keep-inner="someCondition">
    <span>This is always rendered no matter what</span>
</a

Answer 1

我认为这是自定义指令的工作.我把这个作为一个快速的POC:

Vue.directive('showButKeepInner', {
  bind(el, bindings) {
    bindings.def.wrap = function(el) {
      // Find all next siblings with data-moved and move back into el
      while (el.nextElementSibling && el.nextElementSibling.dataset.moved) {
        el.appendChild(el.nextElementSibling).removeAttribute('data-moved')
      }
      el.hidden = false
    }

    bindings.def.unwrap = function(el) {
      // Move all children of el outside and mark them with data-moved attr
      Array.from(el.children).forEach(child => {
        el.insertAdjacentElement('afterend', child).setAttribute('data-moved', true)
      })
      el.hidden = true
    }
  },

  inserted(el, bindings) {
    bindings.def[bindings.value ? 'wrap' : 'unwrap'](el)
  },

  update(el, bindings) {
    bindings.def[bindings.value ? 'wrap' : 'unwrap'](el)
  }
})

new Vue({
  el: '#app',
  data: {
    someCondition: false
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div id="app">
  <p>
    <button v-on:click="someCondition = !someCondition">{{ someCondition }}</button>
  </p>
  <a v-show-but-keep-inner="someCondition" href="/">
    <span>This is always rendered no matter what</span>
  </a>
</div>

Answer 2

对于 Vue v3.x，以下内容可行：

<!-- `v-fragment` is globally registered -->
<component
  :is="condition ? 'custom-component' : 'v-fragment'"
  custom-component-prop
  ...
>
  ...
</component>

// VFragment.vue
<template>
  <slot></slot>
</template>

<script>
  export default {
    inheritAttrs: false,
  }
</script>

对于 Vue v2.x，解决方法是：

<component
  :is="condition ? 'custom-component' : 'div'"
  custom-component-prop
  ...
>
  ...
</component>

权衡是，div由于 Vue v2.x 不支持片段，因此会渲染额外的元素。

Answer 3

我刚刚遇到了同样的问题。

Vue.js 核心团队成员LinusBorg为这个用例提供了一个很好的解决方案，使用具有自定义渲染功能的功能组件：

Vue.component('with-root', {
  functional: true,
  props: ['show'],
  render(h, ctx) {
    const children = ctx.children.filter(vnode => vnode.tag) // remove unnecessary text nodes
    console.log(children)
    if (children.length !== 1) {
      console.warn('this component accepts only one root node in its slot')
    }
    if (ctx.props.show) {
      return children[0]
    } else {
      return children[0].children
    }
  }
})

new Vue({
  el: '#app',
  data: {
    show: true
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <with-root v-bind:show="show">
    <a href="#">
      <span>This is always rendered no matter what</span>
    </a>
  </with-root>
  <br>
  <button @click="show = !show">Toggle</button>
  <pre>{{$data}}</pre>
</div>

他的小提琴：https : //jsfiddle.net/Linusborg/w9d8ujn8/

来源：https : //forum.vuejs.org/t/conditionally-render-parent-element/9324/2