vue2.0+ 使用keep-alive 以及is属性

<!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 的使用
vue2.0+ 使用keep-alive 以及is属性

猜你喜欢
