vue实现TAB切换效果

场景：做一个类似tab切换的效果，我这里做的是点击不同的名称，对应的组件切换

 效果图如下：

 

 

 具体代码：

<template>
    <div>
        <div class="tab-tit">
            <!--<a :class="itemIndex==index?'on':''" ref href="" @click.prevent="changeCountry('china')">组件一</a>
            <a :class="itemIndex==index?'on':''" ref href="" @click.prevent="changeCountry('Russia')">组件二</a>
            <a :class="itemIndex==index?'on':''" ref href="" @click.prevent="changeCountry('Ukraine')">组件三</a>-->

            <!-- 方法二：循环取出标题 -->
            <a :class="itemIndex==index?'on':''" href="#/defult" v-for="(item,index) in Countrytit" :key="index" @click.prevent="changeCountry(item.englishName,index)">{{item.name}}</a>
        </div>
        <div class="tab-list">
            <component :data='CountryData' :is="CountryName"></component>
        </div>
    </div>
</template>

<script>
import China from './china.vue'//导入中国组件
import Russia from './Russia.vue'//导入俄罗斯组件
import Ukraine from './Ukraine.vue'//导入乌克兰组件
export default {
    data(){
        return{
            itemIndex:0,//默认下标是 0，用来控制 标题的样式
            Countrytit:[//标题的数组
                {name:'组件一',englishName:'china'},
                {name:'组件二',englishName:'Russia'},
                {name:'组件三',englishName:'Ukraine'},
            ],
            CountryName:China,//默认显示 China 组件
            CountryData:'我是组件一的内容！！！',//默认数据
        }
    },
    methods:{
        changeCountry(countryName,i){//点击方法（英文名称，下标）
            console.log(location.hash)//获取页面的hash值
            this.itemIndex=i
            switch(countryName){
				case 'china':
				this.CountryName=China
                this.CountryData='我是组件一的内容！！！'
				break;
				case 'Russia':
				this.CountryName=Russia
                this.CountryData='我是组件二的内容'
				break;
                case 'Ukraine':
				this.CountryName=Ukraine
                this.CountryData='我是组件三的内容'
				break;
			}
        }
    },
    components:{//注册组件
        China,
        Russia,
        Ukraine
    },
    //这是获取网址的hash值 jq同样适用
    // window.onhashchange=function(){
    //     var hash = location.hash
    //     console.log(hash)
    // }

}
</script>

<style scoped>
    .tab-tit a.on{color:red;}
</style>