javascript - 为动态出现的文本保留空间

Question

我有一些有条件地显示的文本。 显示文本时，它会下推页面的其余部分。

保留文本空间的正确方法是什么，即使它没有显示以避免下推？

我想避免使用绝对位置并为容器提供预先固定的高度。

附上片段。 只需单击按钮，就会看到绿色框被推送。

new Vue({
  el: "#app",
  data: {
    message: "hello",
    push:false
  }
});

button{
  display:block;
}
#push-down{
  height:100px;
  width:100px;
  background-color:green;
}

p{
  font-size:30px;
  margin:0;
}

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="push=!push">click me to push</button>
  <p v-show="push">{{message}}</p>
  <div id="push-down"></div>
</div>

Answer 1

您可以通过在元素上设置 CSS 属性 visibility 来实现您想要的效果。

将此属性设置为hidden 将从 View 中隐藏该元素，同时保持它在可见时使用的空间。您可以通过将 visibility 设置为 visible 使其可见 Check out the MDN docs here .