<template>
<div class="content">
<image class="logo" src="/static/logo.png"></image>
<div class="text-area">
<!-- <text class="title">{{title}}</text> -->
<div class="tab" :class="{'select': select === 'tab1'}" @click="changeTab('tab1', 100)">tab1</div>
<div class="tab" :class="{'select': select === 'tab2'}" @click="changeTab('tab2', 200)">tab2</div>
</div>
<div class="content-area">
<div class="content-item" v-for="(item, index) in tabList" :key="index">
<!-- 非组件,纯元素代码,内容和组件一致,测试自定义组件需注释 -->
<div class="item-wrapper">
<div class="item" v-for="(it, i) in item" :key="i">
<span>{{it}}</span>
</div>
</div>
<!-- 自定义组件 测试组件放开下面注释,注释上面元素代码 -->
<!-- <demo :tabList="item"></demo> -->
</div>
</div>
</div>
</template>
<script>
import demo from './components/demo.vue';
export default {
data() {
return {
title: 'Hello',
tabList: [],
select: 'tab1'
}
},
components: {demo},
onLoad() {
this.setTabList('tab1', 100);
},
methods: {
setTabList(name, length) {
let arr = []
for(let i = 0; i < 5; i++) {
arr.push(name + i);
}
for(let i = 0; i < length; i++) {
this.tabList.push(arr);
}
// console.log(this.tabList, 'zzzzz')
},
changeTab(name, length) {
this.select = name;
this.tabList = [];
this.setTabList(name, length);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab {
font-size: 48rpx;
color: #8f8f94;
}
.tab.select {
color: red;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.content-area {
font-size: 36rpx;
color: #8f8f94;
}
</style>