<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
list-style: none;
padding: 0;
margin: 0;
}
.temNav span {
padding: 3px 5px;
}
.temNav span.active {
background-color: rgba(0,0,0,.5)
}
.liactive {
background-color: #ddd;
color: #fff;
}
.handelValClass {
display: none;
}
.handelValClass.active{
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="temNav"><span v-for="(tem,index) of temList" :key="index" @click="temFn(index,tem)" :class="{active:index==temIndex}">{{tem}}</span></div>
<!-- keep-alive 保持数据 -->
<keep-alive>
<component-div :is="currentTab"></component-div>
<keep-alive>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 这里是三个模板
var tem0 = {
template:"<div><ul><li v-for=\"(handleval,index) of handelList\" :key=\"index\" class=\"liClass\" :class=\"{ liactive:index== handelIndex}\" @click=\"handelFn(handleval.content,index)\" >{{ handleval.title }}</li></ul><div v-if=\"handelValIndex\">{{ handelValIndex }}</div></div>",
data(){
return {
handelList:[{title:"handle1",content:"handle1-Val"},{title:"handle2",content:"handle2-Val"},{title:"handle3",content:"handle3-Val"}],
handelIndex:0,
handelValIndex:null
}
},
methods:{
handelFn(val,index){// 组件内的Tab
this.handelIndex = index;
this.handelValIndex = val
}
}
}
var tem2 = {
template:"<div><div>这是tem2</div></div>",
}
var tem3 = {
template:"<div><div>这是tem3</div></div>",
}
// 实例化
var vue = new Vue({
el:"#app",
data:{
currentTab:"tem0",
temList:['tem0','tem2','tem3'],
temIndex:0
},
methods:{
temFn(index,temval){// 组件Tab
this.temIndex = index;
this.currentTab = temval;
}
},
components:{
"tem0":tem0
"tem2":tem2,
"tem3":tem3,
}
})
</script>
</html>
demo 用来练习keep-alive 的使用