我怎样才能使这个 v-tabs Vuetify.js 组件工作?
How can I make this v-tabs Vuetify.js component work?
我在页面上添加了 this v-tabs
组件。
在示例中,只有 1 个数据块 (text
) 绑定到组件(所有 3 个选项卡都显示此 text
数据):
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="i in items"
:key="i"
:href="'#tab-' + i"
>
{{ i }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="i in items"
:key="i"
:id="'tab-' + i"
>
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: ['Item One', 'Item Seventeen', 'Item Five'],
text: 'Lorem ipsum dolor sit amet, consectetur'
}
}
}
</script>
如何在每个选项卡中显示单独的数据块?
如果您希望将所有内容抽象到 data
部分,那么您可以这样做 https://codepen.io/anon/pen/Leyoqz :
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="item in items"
:key="item.id"
:href="'#tab-' + item.id"
>
{{ item.title }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="item in items"
:key="item"
:id="'tab-' + item.id"
>
<v-card flat>
<v-card-text>{{ item.text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: [
{
title: "First Item",
text: "This is the first text",
id: 1
},
{
title: "Second Item",
text: "This is the second text",
id: 2
},
{
title: "Third Text",
text: "This is the third text",
id: 3
},
]
}
}
}
</script>
或者,如果你不需要它是动态的,那么你可以像这样硬编码它:
<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>
您还可以使用 dynamic component
选项卡内容绑定。这为您提供了更大的灵活性和控制力。
要在 2020 年在 vuetify 的每个选项卡内使用自定义组件,请使用:
<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>
我在页面上添加了 this v-tabs
组件。
在示例中,只有 1 个数据块 (text
) 绑定到组件(所有 3 个选项卡都显示此 text
数据):
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="i in items"
:key="i"
:href="'#tab-' + i"
>
{{ i }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="i in items"
:key="i"
:id="'tab-' + i"
>
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: ['Item One', 'Item Seventeen', 'Item Five'],
text: 'Lorem ipsum dolor sit amet, consectetur'
}
}
}
</script>
如何在每个选项卡中显示单独的数据块?
如果您希望将所有内容抽象到 data
部分,那么您可以这样做 https://codepen.io/anon/pen/Leyoqz :
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="item in items"
:key="item.id"
:href="'#tab-' + item.id"
>
{{ item.title }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="item in items"
:key="item"
:id="'tab-' + item.id"
>
<v-card flat>
<v-card-text>{{ item.text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: [
{
title: "First Item",
text: "This is the first text",
id: 1
},
{
title: "Second Item",
text: "This is the second text",
id: 2
},
{
title: "Third Text",
text: "This is the third text",
id: 3
},
]
}
}
}
</script>
或者,如果你不需要它是动态的,那么你可以像这样硬编码它:
<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>
您还可以使用 dynamic component
选项卡内容绑定。这为您提供了更大的灵活性和控制力。
要在 2020 年在 vuetify 的每个选项卡内使用自定义组件,请使用:
<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>