Vue.js VueJS动态选项卡

我需要你帮我做一件简单的事。我看不出如何根据当前选项卡显示内容

我很确定解决方案非常接近，在内容部分类似于

v-if

<button v-for="tab in tabs"
 v-bind:key="tab"
 v-bind:class="['tab-button', { active: currentTab === tab }]"
 v-on:click="currentTab = tab">
{{ tab }}
</button>

<div v-for="(fruit, fruit) in fruits" :key="fruit">
 <p>{{ fruit.name }}</p>
 <p >{{ fruit.price }}</p>
</div>

<div v-for="(vege, vege) in veges" :key="vege">
 <p>{{ vege.name }}</p>
 <p>{{ vege.price }}</p>
</div>

---

是的，只需为每个选项卡内容添加

v-if

（添加包装，因为

v-for

的优先级高于

v-if

，添加了包装）：

{{tab}}
{{fruit.name}

{{fruit.price}

{{vege.name}

{{vege.price}}

另外，我建议使用object而不是array，使用如下选项卡

v-if=“currentTab===tabs.fruits”

试试这个：

<div v-if="currentTab === 'fruits'" v-for="(fruit, fruit) in fruits" :key="fruit">
 <p>{{ fruit.name }}</p>
 <p >{{ fruit.price }}</p>
</div>

<div v-if="currentTab === 'veges'" v-for="(vege, vege) in veges" :key="vege">
 <p>{{ vege.name }}</p>
 <p>{{ vege.price }}</p>
</div>

{{fruit.name}

{{fruit.price}

{{vege.name}

{{vege.price}}

像这样使用模板内部的

v-if

（如果您想根据需要切换多个元素）

{{fruit.name}

{{fruit.price}

{{vege.name}

{{vege.price}}

 <button v-for="tab in tabs"
   v-bind:key="tab"
   v-bind:class="['tab-button', { active: currentTab === tab }]"
   v-on:click="currentTab = tab">
   {{ tab }}
 </button>
 <div v-if="currentTab === tabs[0]">
     <div v-for="(fruit, index) in fruits" :key="index">
      <p>{{ fruit.name }}</p>
      <p >{{ fruit.price }}</p>
     </div>
 </div>
 <div v-if="currentTab === tabs[1]">
     <div v-for="(vege, vege) in veges" :key="vege">
      <p>{{ vege.name }}</p>
      <p>{{ vege.price }}</p>
    </div>
 </div>

<div v-if="currentTab === 'fruits'" v-for="(fruit, fruit) in fruits" :key="fruit">
 <p>{{ fruit.name }}</p>
 <p >{{ fruit.price }}</p>
</div>

<div v-if="currentTab === 'veges'" v-for="(vege, vege) in veges" :key="vege">
 <p>{{ vege.name }}</p>
 <p>{{ vege.price }}</p>
</div>

 <template v-if="currentTab === 'fruits'">
    <div v-for="(fruit, index) in fruits" :key="index">
      <p>{{ fruit.name }}</p>
      <p >{{ fruit.price }}</p>
    </div>
 </template>
 <template v-else>
     <div v-for="(vege, index) in veges" :key="index">
       <p>{{ vege.name }}</p>
       <p>{{ vege.price }}</p>
     </div>
</template>