Vue.js 如何使这个v-tabs Vuetify.js组件工作？

我在页面上添加了

v-tabs

组件

在本例中，只有1块数据（

text

）绑定到组件（所有3个选项卡都显示此

text

数据）：

{{i}
{{text}}
导出默认值{
数据（）{
返回{
项目：[‘项目一’、‘项目十七’、‘项目五’]，
文字：“Lorem ipsum dolor sit amet，Concertetur”
}
}
}

---

如何在每个选项卡中显示单独的数据块？

如果希望将所有内容抽象到

数据部分，则可以执行以下操作：


{{item.title}
{{item.text}
导出默认值{
数据（）{
返回{
项目：[
{
标题：“第一项”，
文本：“这是第一个文本”，
身份证号码：1
},
{
标题：“第二项”，
文本：“这是第二个文本”，
身份证号码：2
},
{
标题：“第三文本”，
文本：“这是第三个文本”，
身份证号码：3
},
]
}
}
}

或者，如果您不需要它是动态的，那么您可以像这样硬编码：

<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
  <v-tabs-slider class="yellow"></v-tabs-slider>
  <v-tabs-item href="#tab-1">
    Tab One
  </v-tabs-item>
   <v-tabs-item href="#tab-2">
    Tab Two
  </v-tabs-item>
   <v-tabs-item href="#tab-3">
    Tab Three
  </v-tabs-item>
</v-tabs-bar>
<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>


表一
表二
表三
这是第一个标签
这是第二个标签
这是第三个标签

您还可以使用
动态组件
选项卡内容绑定。这给了你更多的灵活性和控制力


要在vuetify 2020中的每个选项卡内使用自定义组件，请使用：

   <v-container>
    <v-tabs centered>
      <v-tabs-slider/>
      <v-tab>Tab1</v-tab>
      <v-tab>Tab2</v-tab>
      <v-tab>Tab3</v-tab>

      <v-tab-item>
        <MyView1 />
      </v-tab-item>
      <v-tab-item>
        <MyView2 />
      </v-tab-item>
      <v-tab-item>
        <MyView3 />
      </v-tab-item>
    </v-tabs>
  </v-container>


表1
表2
表3
非常感谢，现在我了解了选项卡如何与循环一起工作。我以前不太懂如何使用这个id。谢谢你，为什么很难找到一个实际有效的简单例子呢？谢谢
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
  <v-tabs-slider class="yellow"></v-tabs-slider>
  <v-tabs-item href="#tab-1">
    Tab One
  </v-tabs-item>
   <v-tabs-item href="#tab-2">
    Tab Two
  </v-tabs-item>
   <v-tabs-item href="#tab-3">
    Tab Three
  </v-tabs-item>
</v-tabs-bar>
<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>

   <v-container>
    <v-tabs centered>
      <v-tabs-slider/>
      <v-tab>Tab1</v-tab>
      <v-tab>Tab2</v-tab>
      <v-tab>Tab3</v-tab>

      <v-tab-item>
        <MyView1 />
      </v-tab-item>
      <v-tab-item>
        <MyView2 />
      </v-tab-item>
      <v-tab-item>
        <MyView3 />
      </v-tab-item>
    </v-tabs>
  </v-container>