Javascript 如果没有内容，则隐藏空选项卡

如果Vue js中没有可显示的内容，如何“隐藏空选项卡”

      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="description-tab"
            data-toggle="tab"
            href="#description"
            role="tab"
            aria-controls="description"
            aria-selected="true">{{ ('Description') }}</a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="specification-tab"
            data-toggle="tab"
            href="#specification"
            role="tab"
            aria-controls="specification"
            aria-selected="false">{{ ('Specification') }}</a>
        </li>
      </ul>

      <div class="tab-content py-4">
        <div 
          class="tab-pane fade show active"
          id="description"
          role="tabpanel"
          aria-labelledby="description-tab"
          v-html="product.description">
          </div>
        <div 
          class="tab-pane fade"
          id="specification"
          role="tabpanel"
          aria-labelledby="specification-tab"
          v-html="product.specification">
          </div>
      </div>

---

正如注释所示，在Vue.js中，您得到了用于有条件地渲染块的。仅当指令的表达式返回truthy值时，才会呈现该块

文档中的一个小示例：

<h1 v-if="awesome">Vue is awesome!</h1>

Vue太棒了！

因此，您的代码可能与此类似：

<ul class="nav nav-tabs" role="tablist">
  <li v-if="product.description" class="nav-item">
    <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{{ ('Description') }}</a>
  </li>
  <li v-if="product.specification" class="nav-item">
    <a class="nav-link" id="specification-tab" data-toggle="tab" href="#specification" role="tab" aria-controls="specification" aria-selected="false">{{ ('Specification') }}</a>
  </li>
</ul>

<div class="tab-content py-4">
  <div v-if="product.description" class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab" v-html="product.description">
  </div>
  <div v-if="product.specification" class="tab-pane fade" id="specification" role="tabpanel" aria-labelledby="specification-tab" v-html="product.specification">
  </div>
</div>

---

我希望有帮助

当您使用vue时，使用原始javascript来删除它绝对不是一个好办法。您可以在模板中使用

v-if

语句。

<ul class="nav nav-tabs" role="tablist">
  <li v-if="product.description" class="nav-item">
    <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{{ ('Description') }}</a>
  </li>
  <li v-if="product.specification" class="nav-item">
    <a class="nav-link" id="specification-tab" data-toggle="tab" href="#specification" role="tab" aria-controls="specification" aria-selected="false">{{ ('Specification') }}</a>
  </li>
</ul>

<div class="tab-content py-4">
  <div v-if="product.description" class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab" v-html="product.description">
  </div>
  <div v-if="product.specification" class="tab-pane fade" id="specification" role="tabpanel" aria-labelledby="specification-tab" v-html="product.specification">
  </div>
</div>