如何有条件地显示一个元素，保持其占用的空间？

Question

Vue.js 有两个条件关键字：v-ifandv-show允许根据条件使元素可见或不可见。区别在于

不同之处在于，带有 的元素v-show将始终呈现并保留在 DOM 中；v-show只切换元素的显示 CSS 属性。

我认为它会对不可见元素占用的空间产生影响，但在任何这些情况下，当条件为假时，元素占用的空间为 none。

这意味着，比如说，在三个元素占据屏幕宽度的 100% 的跨度中，不可见元素的位置被下一个元素占据，就像在这个 CSS 网格示例中一样：

new Vue({
  el: "#app",
  data: {
    visible: true
  },
  mounted() {
    setInterval(() => this.visible = !this.visible, 1000)
  }
})

#app {
  display: grid;
  grid-template-columns: auto auto auto;
}

#app div {
  border-style: solid;
  border-width: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>one</div>
  <div v-if="visible">two</div>
  <div>three</div>
</div>

有没有一种简单的方法可以隐藏元素的内容（使其不可见），但要保留其空间？ （在上面的例子中，中心元素出现和消失 - 但其他两个不移动）

Answer 1

看看这个：https : //forum.vuejs.org/t/vue-style-visibility-hidden-on-v-show-how/58293

您可以使用自定义指令实现它：

Vue.directive('visible', function(el, binding) {
    el.style.visibility = !!binding.value ? 'visible' : 'hidden';
});

然后使用

<div v-visible="your_condition" ... >

Answer 2

参见MDN-CSS 可见性，

可见性 CSS 属性可以在不影响文档布局的情况下显示或隐藏元素（即，无论元素是否可见，都会为元素创建空间）

因此，使用Vue 的动态样式将您的表达式绑定到 CSS 可见性。

new Vue({
  el: "#app",
  data: {
    visible: true
  },
  mounted() {
    setInterval(() => this.visible = !this.visible, 1000)
  }
})

#app {
  display: grid;
  grid-template-columns: auto auto auto;
}

#app div {
  border-style: solid;
  border-width: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>one</div>
  <div :style="{visibility: visible ? 'visible' : 'hidden'}">two</div>
  <div>three</div>
  {{visible}}
</div>

Answer 3

绑定样式的不透明度 = 0 或 1。

new Vue({
  el: "#app",
  data: {
    visible: true
  },
  mounted() {
    setInterval(() => this.visible = !this.visible, 1000)
  }
})

.layout {
  display: grid;
  grid-template-columns: auto auto auto;
}

.your-column {
  border-style: solid;
  border-width: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div class="layout">
    <div class="your-column">one</div>
    <div class="your-column" :style="{'opacity':visible?1:0}">two</div>
    <div class="your-column">three</div>
  </div>
</div>