如何在vueJS的不同标签中显示不同的内容

Question

我正在尝试使用 vueJS 框架和 vuetify 模板构建一个网站。 我想在不同的标签下显示不同的内容。 我写了一段代码，但是三个选项卡中都出现了相同的内容。 我该怎么做？ 我在这里附上了代码。

  <v-tabs
    centered
    color="deep-purple accent-1"
    slot="extension"
    slider-color="yellow"
    v-model="model"
  >
    <v-tab href="#tab-1">
    Solar Panels
   </v-tab>

   <v-tab href="#tab-2">
   CCTV Panels
  </v-tab>

  <v-tab href="#tab-3">
  LED Lights
 </v-tab>
 </v-tabs>

 <v-tabs-items>
   <v-tabs-content id="tab-1">
     <v-card flat>
       <v-card-text>This is the first tab</v-card-text>
     </v-card>
   </v-tabs-content>
   <v-tabs-content id="tab-2">
     <v-card flat>
       <v-card-text>This is the second tab</v-card-text>
     </v-card>
   </v-tabs-content>
   <v-tabs-content id="tab-3">
     <v-card flat>
       <v-card-text>This is the third tab</v-card-text>
     </v-card>
   </v-tabs-content>
 </v-tabs-items>

Answer 1

我曾经有同样的问题。 看看试试这个。

基本选项卡由一系列标题和与每个标题相关的相应内容组成。 使用 for 循环动态定义单个组件以创建选项卡

<v-tabs
          fixed-tabs
          v-model="tab"
        >
          <v-tabs-slider color="amber darken-3"></v-tabs-slider>
          <v-tab
            v-for="(item, index) in items"
            :class="{active: currentTab === index}"
            @click="currentTab = index"
            :key="item"
          >
            {{ item }}
          </v-tab>
        </v-tabs>

       // Display different content here
        <v-tabs-items v-model="tab">
          <v-card flat>            
            <div v-show="currentTab === 0"><v-card-text>Tab0 content</v-card-text></div>
            <div v-show="currentTab === 1"><v-card-text>Tab1 content</v-card-text></div>
            <div v-show="currentTab === 2"><v-card-text>Tab2 content</v-card-text></div>
            <div v-show="currentTab === 3"><v-card-text>Tab3 content</v-card-text></div>
            <div v-show="currentTab === 4"><v-card-text>Tab4 content</v-card-text></div>
          </v-card>
        </v-tabs-items>
      </v-card>


export default {
   data () {
     return {
      currentTab: 0,
      tab: null,
      items: ['tab0', 'tab1', 'tab2', 'tab3', 'tab4'],
     }
  }

Answer 2

<v-card>
   <v-tabs background-color="white" color="deep-purple accent-4" right>
      <v-tab>Landscape</v-tab>
      <v-tab>City</v-tab>
      <v-tab>Abstract</v-tab>
      <v-tab-item v-for="n in 3" :key="n">
         <v-container fluid>
            <v-card-text v-if="n==1">This is the first tab</v-card-text>
            <v-card-text v-if="n==2">This is the second tab</v-card-text>
            <v-card-text v-if="n==3">This is the Third tab</v-card-text>
         </v-container>
      </v-tab-item>
   </v-tabs>
</v-card>

Answer 3

在我看来，Vuetify 有一个很好的文档并且易于遵循。

从vuetify 选项卡

“html”部分

<div id="app">
  <v-app id="inspire">
    <div>
      <v-tabs
        v-model="active"
        color="cyan"
        dark
        slider-color="yellow"
      >
        <v-tab
          v-for="n in 3"
          :key="n"
          ripple
        >
          Item {{ n }}
        </v-tab>
        <v-tab-item
          v-for="(text, index) in texts"
          :key="index"
        >
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>

      <div class="text-xs-center mt-3">
        <v-btn @click.native="next">next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

“javascript（vue）”部分：

new Vue({
  el: '#app',
  data () {
    return {
      active: null,
      texts: ['first tab', 'second tab', 'third tab']
    }
  },
  methods: {
    next () {
      const active = parseInt(this.active)
      this.active = (active < 2 ? active + 1 : 0).toString()
    }
  }
})

请注意，这是从 vuetify 文档示例中稍微修改的