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

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">&nbsp; <li v-if="product.description" class="nav-item">&nbsp; &nbsp; <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{{ ('Description') }}</a>&nbsp; </li>&nbsp; <li v-if="product.specification" class="nav-item">&nbsp; &nbsp; <a class="nav-link" id="specification-tab" data-toggle="tab" href="#specification" role="tab" aria-controls="specification" aria-selected="false">{{ ('Specification') }}</a>&nbsp; </li></ul><div class="tab-content py-4">&nbsp; <div v-if="product.description" class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab" v-html="product.description">&nbsp; </div>&nbsp; <div v-if="product.specification" class="tab-pane fade" id="specification" role="tabpanel" aria-labelledby="specification-tab" v-html="product.specification">&nbsp; </div></div>