场景:做一个类似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>