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

Vuetify在我看来有很好的文档，很容易理解。

来自vuetify tabs

“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文档示例

中稍微修改一下

Answer 2

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

基本选项卡由一系列标题和与每个标题相关的相应内容组成。使用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 3

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

如何在vueJS中的不同选项卡中显示不同的内容

3 个答案: