Question

我使用Vuejs并具有一个带有div容器的组件，如果该容器为空，则该组件会折叠。

<template>
  <div>{{ content }}</div>
</template>

<script>
export default {
  name: "myComponent",
  props: {
    content: String
  }
};
</script>

使用该成分时，我可以寻求

<MyComponent content="text to show" />

但是如果我希望它为空怎么办？然后，div不占用空间并崩溃。我想阻止它。

<!-- This one takes no space -->
<div></div>
<div>This one takes space</div>

我考虑过要传递unicode

div {
  background: red;
  margin: 20px;
}

<div>&#10240;</div>
<div>This one takes space</div>

但是当接收字符串作为参数时，该组件不会将其转换为Unicode字符。

有没有使用CSS而不是Unicode字符的解决方案？

我创建了一个小例子来说明当前问题

Answer 1

您可以为U+00A0 div添加一个不间断空格（Unicode符号:empty）作为伪元素的内容

div:empty::before {
  content: "\A0";
}

或者您可以将特定的height直接设置为div:empty

Codepen demo

Answer 2

您可以使用after伪元素添加一个空格（然后它将占用字体的高度）

div {
  background: red;
  margin: 20px;
}

div:after {
  content:' ';
  display:inline-block;
}

<div></div>
<div>This one takes space</div>

或者，如果您希望vue组件显示html，则可以使用

<div v-html="content"></div>

代替您的

<div>{{ content }}</div>

Answer 3

对vue不太熟悉，但是也许吗？

{{ content }}可能是{{ content || "  " }}

Answer 4

您可以将最小高度设置为50px（或更小）

div {
  background: red;
  margin: 20px;

  min-height: 50px;
}