原理：
- 在data中记录一个tags。
- 标签中通过判断
:class="{active:middletags(0)}"来判断正处于的子页面，@click="changetags(0)"切换子页面。
- 通过
v-show="tags==0"来判断子页面的显示。
<!-- 首页 -->
<template>
<div>
<div class="indexMiddle">
<ul class="middleTags">
<li :class="{active:middletags(0)}" @click="changetags(0)">文章</li>
<li :class="{active:middletags(1)}" @click="changetags(1)">福利</li>
</ul>
<ul>
<li v-show="tags==0">这是第一个页面的内容</li>
<li v-show="tags==1">这是第二个页面的内容</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: 0
};
},
components: {},
computed: {},
mounted() {},
methods: {
middletags(tag) {
if (tag == this.tags) {
return true;
} else {
return false;
}
},
changetags(tag) {
this.tags = tag;
}
}
};
</script>
<style scoped>
.indexMiddle .middleTags .active {
color: #b84a4a;
border-bottom: 2px solid #b84a4a;
}
</style>
