主要介绍编译思想
完成效果如下图
单击页数实现跳转
代码如下图所示
css:
*{
margin: 0;
padding: 0;
}
.tabs{
width: 300px;
height: 30px;
}
.tab{
float: left;
width: 100px;
height: 30px;
}
.tabs+div{
width: 300px;
height: 300px;
}
html:
<div id="app">
<switchover></switchover>
</div>
<template id="switchover">
<div>
<div class="tabs">
<div class="tab" @click="switchTab('Paging1')">
<a>第一页</a>
</div>
<div class="tab" @click="switchTab('Paging2')">
<a>第二页</a>
</div>
<div class="tab" @click="switchTab('Paging3')">
<a>第三页</a>
</div>
</div>
<prince :is="currentTab" keep-alive></prince>
</div>
</template>
<template id="Paging1">
<div>
<p>这是第一页</p>
<h1>hahaha</h1>
</div>
</template>
<template id="Paging2">
<div>
<p>这是第二页</p>
</div>
</template>
<template id="Paging3">
<div>
<p>这是第三页</p>
</div>
</template>
js.
new Vue({
el:"#app",
components:{
"switchover":{
template:"#switchover",
data(){
return{
currentTab:"Paging1"
}
},
components:{
"Paging1":{
template:"#Paging1"
},
"Paging2":{
template:"#Paging2"
},
"Paging3":{
template:"#Paging3"
}
},
methods:{
switchTab(val){
this.currentTab=val;
}
}
}
}
})