隐藏空标签如果它没有内容

Question

如果在 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>试过这个：[没用]hidetabs () {const tabs = document.querySelectorAll(".tab-content py-4 > div[id^=tab]:empty");for (const tab of tabs) {  console.log("hi")  document.querySelector(`a[href="${tab.id}"]`).parentNode.remove();}},

Answer 1

正如评论所暗示的，在 Vue.js 中，您得到了用于有条件地渲染块的v-if指令。只有当指令的表达式返回一个真值时，才会呈现该块。

文档中的一个小例子：

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

因此，对于您的代码，它可能类似于：

<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>