原理：

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