<!DOCTYPE html>

<html>

    <head>

        <title>组件的切换</title>

        <meta charset="utf-8">

    </head>

    <body>

        <!-- 方式一:结合v-if及v-else 只能实现两个组件的切换-->

        <div id="app">

            <!-- 添加事件修饰符prevent，阻止跳转 -->

            <a href="" @click.prevent="flag=true">登录</a>

            <a href="" @click.prevent="flag=false">注册</a>

            <login v-if="flag"></login>

            <register v-else="flag"></register>

        </div>

        <!-- 方式二：使用vue提供的元素component 可实现多个组件的切换-->

        <div id="app2">

                <a href="" @click.prevent="comName=login">登录</a>

                <a href="" @click.prevent="comName=register">注册</a>

            <!-- vue提供的元素，来展示对应名称的组件 -->

            <!-- component是一个占位符，:is属性是指定组件的名称 -->

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

        </div>

    </body>

    <script src="node_modules\vue\dist\vue.js"></script>

    <script>

        Vue.component("login",{

            template:"<h3>登录组件</h3>"

        })

        Vue.component("register",{

            template:"<h3>注册组件</h3>"

        })

        let vm = new Vue({

            el:"#app",

            data:{

                flag:false

            }

        });

        let vm2 = new Vue({

            el:"#app2",

            data:{

                comName:"login"

            }

        })

    </script>

</html>

vue实现组件切换的两种方式的更多相关文章

  1. React组件导入的两种方式(动态导入组件的实现)

    一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...

  2. DRF 序列化组件 序列化的两种方式 反序列化 反序列化的校验

    序列化组件 django自带的有序列化组件不过不可控不建议使用(了解) from django.core import serializers class Books(APIView): def ge ...

  3. vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  4. Vue 定义组件模板的七种方式(一般用单文件组件更好)

    在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过 ...

  5. vue页面是否缓存的两种方式

    第一种 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> ...

  6. Vue - 引入本地图片的两种方式

    第一种,只引入单个图片,这种引入方法在异步中引入则会报错. 比如需要遍历出很多图片展示时 <image :src = require('图片的路径') /> 第二种,可引入多个图片,也可引 ...

  7. vue 页面跳转的两种方式

    1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...

  8. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  9. [Android]解决3gwap联网失败：联网请求在设置代理与直连两种方式的切换

    [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...

随机推荐

  1. SpringBoot配置加载顺序

    一般我们会将SpringBoot应用需要的配置内容放在项目工程中,然后通过spring.profiles.active或是通过Maven来实现多环境的支持.但是,当团队逐渐壮大,分工越来越细之后,往往 ...

  2. jenkins结合httprunner配置实现自动化测试

    jenkins结合httprunner配置实现自动化测试 自动化测试思路: jenkins发布代码到预发布环境 –> 触发自动化测试预发布环境 à 返回测试结:如果测试通过则将代码推送到生产环境 ...

  3. centos7设置rsyslog日志服务集中服务器

    centos7设置rsyslog日志服务集中服务器 环境:centos6.9_x86_64,自带的rsyslog版本是7.4.7,很多配置都不支持,于是进行升级后配置 # 安装新版本的rsyslog程 ...

  4. 【DataBase】Hsqldb的简单使用

    介绍 HSQLDB是一个开放源代码的JAVA数据库,其具有标准的SQL语法和JAVA接口,它可以自由使用和分发,非常简洁和快速的.具有Server模式,每个程序需要不同的命令来运行. HyperSQL ...

  5. Linux系统调优——网络（四）

    (1).查看网络(Network)运行状态相关工具 1)nload监控总体带宽使用情况 nload需要自己安装,而且在安装前需要安装epel-release [root@youxi1 ~]# yum ...

  6. Spring Cloud API网关服务 5.2

    为什么需要API网关 通过前面内容的学习,我们已经可以构建一个简单的微服务架构系统.这个系统可以使用Spring Boot实现微服务的开发,使用Spring Cloud Eureka实现注册中心以及服 ...

  7. 【翻译】The Broadcast State Pattern（广播状态）

    本文翻译自官网:The Broadcast State Pattern Provided APIs (提供的api) BroadcastProcessFunction and KeyedBroadca ...

  8. Golang中的Map（集合）

    Map 是一种无序的键值对的集合.Map 最重要的一点是通过 key 来快速检索数据,key 类似于索引,指向数据的值. Map 是一种集合,所以我们可以像迭代数组和切片那样迭代它.不过,Map 是无 ...

  9. VUE 多页面打包webpack配置

      思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...

  10. 高级UI-FloatingActionButton

    FloatingActionButton为悬浮按钮,就是常见的那种悬浮在控件上,可以调出其他菜单的按钮 FloatingActionButton的特有属性 app:backgroundTint 按钮的 ...