----------------------html、js、style-----------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet"  type="text/css" href="index.css"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--在动态组件上使用 keep-alive--</h1>
        <div id="example1" class="demo">
            <button
                class="dynamic-component-demo-tab-button"
                v-for="tab in tabs"
                v-bind:class="{ 'dynamic-component-demo-active' : tab === 'Posts' }"
                v-on:click="currentTab = tab"
            >
                {{ tab }}
            </button>
            <!--如果去掉keep-alive标签，在Posts和Archive直接切换时，将不会缓存另外一个-->
            <keep-alive>
                <component v-bind:is="currentTabComponent"></component>
            </keep-alive>
        </div>
        <script>
        Vue.component('tab-posts', {
            data: function () {
                return {
                    posts: [
                        {
                            id: 1,
                            title: 'Cat Ipsum',
                            content: '<p>Dont wait for the storm to pass, dance in the rain kick up litter decide to want nothing to do with my owner today demand to be let outside at once, and expect owner to wait for me as i think about it cat cat moo moo lick ears lick paws so make meme, make cute face but lick the other cats. Kitty poochy chase imaginary bugs, but stand in front of the computer screen. Sweet beast cat dog hate mouse eat string barf pillow no baths hate everything stare at guinea pigs. My left donut is missing, as is my right loved it, hated it, loved it, hated it scoot butt on the rug cat not kitten around.</p>'
                        },
                        {
                            id: 2,
                            title: 'Hipster Ipsum',
                            content: '<p>Bushwick blue bottle scenester helvetica ugh, meh four loko. Put a bird on it lumbersexual franzen shabby chic, street art knausgaard trust fund shaman scenester live-edge mixtape taxidermy viral yuccie succulents. Keytar poke bicycle rights, crucifix street art neutra air plant PBR&B hoodie plaid venmo. Tilde swag art party fanny pack vinyl letterpress venmo jean shorts offal mumblecore. Vice blog gentrify mlkshk tattooed occupy snackwave, hoodie craft beer next level migas 8-bit chartreuse. Trust fund food truck drinking vinegar gochujang.</p>'
                        },
                        {
                            id: 3,
                            title: 'Cupcake Ipsum',
                            content: '<p>Icing dessert soufflé lollipop chocolate bar sweet tart cake chupa chups. Soufflé marzipan jelly beans croissant toffee marzipan cupcake icing fruitcake. Muffin cake pudding soufflé wafer jelly bear claw sesame snaps marshmallow. Marzipan soufflé croissant lemon drops gingerbread sugar plum lemon drops apple pie gummies. Sweet roll donut oat cake toffee cake. Liquorice candy macaroon toffee cookie marzipan.</p>'
                        },
                    ],
                    selectedPost: null
                }
            },
            template: '\
                <div class="dynamic-component-demo-posts-tab">\
                    <ul class="dynamic-component-demo-posts-sidebar">\
                        <li\
                            v-for="post in posts"\
                            v-bind:key="post.id"\
                            v-bind:class="{ \'dynamic-component-demo-active\' : post === selectedPost }"\
                            v-on:click="selectedPost = post"\
                        >\
                            {{ post.title }}\
                        </li>\
                    </ul>\
                        <div class="dynamic-component-demo-post-container">\
                            <div\
                                v-if="selectedPost"\
                                class="dynamic-component-demo-post"\
                            >\
                                <h3>{{ selectedPost.title }}</h3>\
                                <div v-html="selectedPost.content"></div>\
                            </div>\
                            <strong v-else>\
                                Click on a blog title to the left to view it.\
                            </strong>\
                        </div>\
                </div>\
            '
        })
        Vue.component('tab-archive', {
            template: '<div>Archive component.</div>'
        })
        var example1 = new Vue({
            el:'#example1',
            data: {
                currentTab: 'Posts',
                tabs: ['Posts', 'Archive']
            },
            computed: {
                currentTabComponent: function () {
                    return 'tab-' + this.currentTab.toLowerCase()
                }
            }
        })
        </script>
        <style>
        .dynamic-component-demo-tab-button {
          padding: 6px 10px;
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
          border: 1px solid #ccc;
          cursor: pointer;
          background: #f0f0f0;
          margin-bottom: -1px;
          margin-right: -1px;
        }
        .dynamic-component-demo-tab-button:hover {
          background: #e0e0e0;
        }
        .dynamic-component-demo-tab-button.dynamic-component-demo-active {
          background: #e0e0e0;
        }
        .dynamic-component-demo-tab {
          border: 1px solid #ccc;
          padding: 10px;
        }
        .dynamic-component-demo-posts-tab {
          display: flex;
        }
        .dynamic-component-demo-posts-sidebar {
          max-width: 40vw;
          margin: 0 !important;
          padding: 0 10px 0 0 !important;
          list-style-type: none;
          border-right: 1px solid #ccc;
        }
        .dynamic-component-demo-posts-sidebar li {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: pointer;
        }
        .dynamic-component-demo-posts-sidebar li:hover {
          background: #eee;
        }
        .dynamic-component-demo-posts-sidebar li.dynamic-component-demo-active {
          background: lightblue;
        }
        .dynamic-component-demo-post-container {
          padding-left: 10px;
        }
        .dynamic-component-demo-post > :first-child {
          margin-top: 0 !important;
          padding-top: 0 !important;
        }
        </style>
        </div>     
    </body>
</html>

-----------------------分割线-----------------------------

运行效果图：

在动态组件上使用 keep-alive的更多相关文章

  1. vue深入了解组件——动态组件&异步组件

    一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...

  2. vue组件---动态组件&异步组件

    (1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...

  3. Vue动态组件&异步组件

    在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...

  4. 学习笔记：Vue——动态组件&异步组件

    动态组件 01.在动态组件上使用keep-alive,保持组件的状态,以避免反复重渲染导致的性能问题. <!-- 失活的组件将会被缓存!--> <keep-alive> < ...

  5. 深入了解组件- -- 动态组件 & 异步组件

    gitHub地址:https://github.com/huangpna/vue_learn/example里面的lesson11 一 在动态组件上使用keep-alive 在这之前我们已经有学习过用 ...

  6. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

  7. C++ 类的动态组件化技术

    序言: N年前,我们曾在软件开发上出现了这样的困惑,用VC开发COM组件过于复杂,用VB开发COM组件发现效率低,而且不能实现面向对象的很多特性,例如,继承,多态等.更况且如何快速封装利用历史遗留的大 ...

  8. vue2入坑随记(二) -- 自定义动态组件

    学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...

  9. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

随机推荐

  1. Linux:变量$#,$@,$0,$1,$2,$*,$$,$?

    写一个简单的脚本 vim var 脚本内容如下: #!/bin/sh echo "the number of parameters passed to the script: $#" ...

  2. mysql 报 'Host ‘XXXXXX’ is blocked because of many connection errors'

    1. 问题:服务启动时,日志报错,导致启动失败: Caused by: com.mysql.cj.exceptions.CJException: null,  message from server: ...

  3. eclips 配置一个tomcat，启动多个不同端口的web项目

    前提: 记录这个文章是因为在网上查资料,很多都是,用eclips.配置多个tomcat,就像下面图这样配置两个tomcat 去启动不同的web: 运动多个web 项目,设置不同的端口,需要多个tomc ...

  4. linux重启后JDk环境变量配置失效最终解决方案

    最终解决方案:https://bbs.deepin.org/forum.php?mod=viewthread&tid=147762 其实这个修改可能也存在问题,如果有耐心的可以每次打开终端   ...

  5. C#ADO.NET技术总结

    [ADO.NET的主要组件-..NET framework数据提供程序和DataSet(数据集)] 一.DataSet数据集负责对数据库执行命令. 二.NET framework数据提供程序的四个核心 ...

  6. 背包问题-C语言实现

    转自:http://blog.csdn.net/tjyyyangyi/article/details/7929665 0-1背包问题 参考: http://blog.csdn.net/liwenjia ...

  7. Shell 语法和tips -- 持续更新

    1. 字符串掐头去尾 #, % 例如:x=aabbaarealwwvvwwecho "${x%w*w}"aabbaarealwwvv echo "${x%%w*w}&qu ...

  8. [BUUCTF]PWN——[HarekazeCTF2019]baby_rop2

    [HarekazeCTF2019]baby_rop2 题目附件 步骤: 例行检查,64位,开启了nx保护 运行了一下程序,了解大概的执行情况 64位ida载入,shift+f12检索程序里的字符串,没 ...

  9. LuoguP1723 高手过愚人节 题解

    Content 有 \(n\) 次询问,每次询问给定一个字符串 \(s\),求这个字符串最长的回文子串的长度. 数据范围:\(n\) 无解(至少从题面来看是这样的),字符串长度目测应该在 \(10^7 ...

  10. 大学MOOC课程视频下载、流文件合并、批量重命名、ｂ站视频下载及学习课程视频推荐

    计算机行业技术更新快,编程语言种类多,在当今大数据和人工智能的时代,为了能在相关领域有所成就,就必须掌握好python.R等语言,较好的数学基础和深入的行业背景知识.计算机从业人员务必践行" ...