template div class=common-layout el-container el-header class=el-header HeaderHeader el-header el-main class=el-main div class=Catalogue div class=C-region

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el-header">
        <Header></Header>
      </el-header>
      <el-main class="el-main">
        <div class="Catalogue">
          <div class="C-region">
            <span>地区：</span>
            <ul>
              <li v-for="region in regions" :class="{ active: selectedRegion === region }" @click="selectRegion(region)">{{ region }}</li>
            </ul>
          </div>
          <el-divider style="float: left;margin: 0;"></el-divider>
          <div class="C-versions">
            <span>版本：</span>
            <ul>
              <li v-for="version in versions" :class="{ active: selectedVersion === version }" @click="selectVersion(version)">{{ version }}</li>
            </ul>
          </div>
          <el-divider style="float: left;margin: 0;"></el-divider>
          <div class="C-initial">
            <span>首字母：</span>
            <ul>
              <li v-for="initial in initials" :class="{ active: selectedInitial === initial }" @click="selectInitial(initial)">{{ initial }}</li>
            </ul>
          </div>
          <el-divider style="float: left;margin: 0;"></el-divider>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedRegion: '全部',
      selectedVersion: '全部',
      selectedInitial: '全部',
      regions: ['全部', '中国', '日本', '欧美'],
      versions: ['全部', 'TV', '剧场版', 'OVA', '特摄'],
      initials: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    };
  },
  methods: {
    selectRegion(region) {
      this.selectedRegion = region;
    },
    selectVersion(version) {
      this.selectedVersion = version;
    },
    selectInitial(initial) {
      this.selectedInitial = initial;
    }
  }
};
</script