前言：查看下面代码，在任意编辑器中直接复制粘贴运行即可

　　1：非动态组件（全局注册2个组件，借用v-if指令和三元表达式）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>toggle切换-非动态组件方式</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="root">

            <child-one v-if="type === 'child-one'"></child-one>

            <child-two v-if="type === 'child-two'"></child-two>

            <button @click="handleClick">call me</button>

        </div>

        <script>

            Vue.component('child-one', {

                template: '<div>child-one</div>'

            })

            Vue.component('child-two', {

                template: '<div>child-two</div>'

            })

            var vm = new Vue({

                el: '#root',

                data: {

                    type: 'child-one'

                },

                methods: {

                    handleClick: function() {

                        this.type = this.type === 'child-one'?'child-two':'child-one'

                    }

                }

            })

        </script>

    </body>

</html>

　　2：动态组件（使用vue自带component标签，它表示一个动态组件，配合is属性绑定type，动态组件会根据is里数据的的变化，自动加载不同的组件）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>toggle切换-动态组件方式</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="root">

            <component :is="type"></component>

            <button @click="handleClick">call me</button>

        </div>

        <script>

            Vue.component('child-one', {

                template: '<div>child-one</div>'

            })

            Vue.component('child-two', {

                template: '<div>child-two</div>'

            })

            var vm = new Vue({

                el: '#root',

                data: {

                    type: 'child-one'

                },

                methods: {

                    handleClick: function() {

                        this.type = this.type === 'child-one'?'child-two':'child-one'

                    }

                }

            })

        </script>

    </body>

</html>

　　3：使用once指令（不要过度使用）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>once指令</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="root">

            <child-one v-if="type === 'child-one'"></child-one>

            <child-two v-if="type === 'child-two'"></child-two>

            <button @click="handleClick">call me</button>

        </div>

        <script>

            Vue.component('child-one', {

                template: '<div v-once>child-one</div>'

            })

            Vue.component('child-two', {

                template: '<div v-once>child-two</div>'

            })

            var vm = new Vue({

                el: '#root',

                data: {

                    type: 'child-one'

                },

                methods: {

                    handleClick: function() {

                        this.type = this.type === 'child-one'?'child-two':'child-one'

                    }

                }

            })

        </script>

    </body>

</html>

　　　注：once优点——每次切换vue底层都是先销毁，然后在创建一个组件，这样是有一定性能消耗的，

　　　　　 　　　　　　once指令切换组件时不会销毁在重新创建组件，而是在第一次切换时把组件存入内存，之后就直接从内存里拿出来使用

　　　　once缺点——建议不要过度使用这个指令。除非当你需要渲染大量静态内容时，

　　　　　　　　　　　极少数的情况下它会给你带来便利，除非你发现渲染因此变得很慢，否则它是没有必要的，再加上它在后期会带来很多困惑，

　　　　　　　　　　　例如，一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多时间去找出模板为什么无法正确更新

vue中toggle切换的3种写法的更多相关文章

  1. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  2. t-sql 中between and 的一种写法

    t-sql 中between and 的一种写法: where GETDATE() BETWEEN BeginDateTime AND EndDateTime; BeginDateTime,EndDa ...

  3. java中for循环的6种写法

    有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考.   package ForLoop; import java.util.ArrayList; import java.util.Itera ...

  4. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 在JavaScript中创建命名空间的几种写法

    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...

  6. js中创建命名空间的几种写法

    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...

  7. 关于JQ中ready()方法的几种写法总结

    ——习惯贵在坚持,天才在于积累. 好久没写博客的我,似乎是忘记了当初写博客的初衷是要在博客笔记中提升自己的写作能力和积累自己的知识要点. 废话不多说. ready()方法作用: 在页面加载完成后,立即 ...

  8. 在js中创建命名空间的几种写法

    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子:   var sayHello = function() { return 'H ...

  9. vue后台管理项目中菜单栏切换的三种方法

    第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

随机推荐

  1. DOS命令行操作MySQL常用命令

    平时用可视化界面用惯了,如果紧急排查问题,没有安装可视化工具的话,只能通过命令来看了. 以备不时之需,我们要熟悉一下命令行操作MySQL. 打开DOS命令窗口:WIN + R 输入cmd,回车 然后输 ...

  2. 深入理解java中的byte类型

    作者 | 进击的石头--GO! 来源 | https://www.cnblogs.com/zl181015/p/9435035.html#4432849 Java也提供了一个byte数据类型,并且是基 ...

  3. .NET MVC5简介（四）Filter和AuthorizeAttribute权限验证

    在webform中,验证的流程大致如下图: 在AOP中: 在Filter中: AuthorizeAttribute权限验证 登录后有权限控制,有的页面是需要用户登录才能访问的,需要在访问页面增加一个验 ...

  4. LinkedHashMap，源码解读就是这么简单

    概述 LinkedHashMap是HashMap的子类,它的大部分实现与HashMap相同,两者最大的区别在于,HashMap的对哈希表进行迭代时是无序的,而LinkedHashMap对哈希表迭代是有 ...

  5. 自学_CSS<二>

    CSS CSS(层叠样式表)是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色.背景颜色.边框等. CSS主要有元素内联.页面嵌入和外部引用三种使用方式.CSS是描述元素的 ...

  6. [20190530]oracle Audit文件管理.txt

    [20190530]oracle Audit文件管理.txt --//昨天听课,讲一些oracle相关安全的问题,对方提到audit file的管理,应该引入OS audit,这样目的是仅仅root查 ...

  7. Lnmp架构部署动态网站环境.2019-7-2-1.1

    一.Mysql简介 Mysql数据库: 1.社区版 2.商业版 3.cluster集群 Mysql安装方式 1.编译安装 2.yum/rpm 3.二进制包,直接解压,无需编译 二.Mysql安装部署 ...

  8. 批量执行用例，且结果显示在html中，python控制台也会显示运行过程

    下载HTMLTestRunner.py放到python安装目录的Lib下: 如下以登录为例,创建不同的.py文件, ========================================== ...

  9. 第50 课C++对象模型分析——成员函数（上）

    类中的成员函数位于代码段中调用成员函数时对象地址作为参数隐式传递成员函数通过对象地址访问成员变量C++语法规则隐藏了对象地址的传递过程 #include<iostream> #includ ...

  10. jenkins添加TPS与服务器监控变化曲线图

    第一步,首先在测试的脚本中添加你所需要查看的曲线图的监控路径 譬如我想查看TPS变化图 添加hps监控图 添加服务器监控图 把所有jtl文件保存到/opt/workspace/B_Stress_Tes ...