如果计数器的值为 0，如何隐藏我的徽章？

Question

这是html代码，包含徽章和显示徽章的条件

<v-tab ripple>
  <v-badge color="red">
    <template v-slot:badge v-if="invoiceCounter > 0 && hasEditAccess === true"> 
      <span>{{ invoiceCounter }}</span>
    </template>
    Invoicing
  </v-badge>
</v-tab>
    
data() {
  return {
    hasEditAccess: false,
    invoiceCounter: 0,              
  };
},

Answer 1

自从发布以来，这个问题还没有收到太多的活动，但我今天遇到了这个问题并解决了。根据 v-badge 的文档（https://vuetifyjs.com/en/api/v-badge/#props-value）， value 属性可用于此目的。v-badge值属性“控制组件是可见还是隐藏”。所以你会做这样的事情：

<v-tab ripple>
  <v-badge color="red" :value="invoiceCounter > 0 && hasEditAccess === true">
    <template v-slot:badge> 
      <span>{{ invoiceCounter }}</span>
    </template>
    Invoicing
  </v-badge>
</v-tab>