<!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. 代替ESXI的虚拟机解决方案proxmox

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/matengbing/article/de ...

  2. ISO/IEC 9899:2011 条款6.7.5——对齐说明符

    6.7.5 对齐说明符 语法 1.alignment-specifier: _Alignas    (    type-name    ) _Alignas    (    constant-expr ...

  3. IDEA使用tomcat插件

    在实际项目开发中,特别是分布式项目,往往有N多个子项目需要同时启动测试. 这一切靠本地安装的tomcat是远远不够的,而且繁琐. 这里就需要用到tomca插件. 在pom.xml中引入: <bu ...

  4. no match for call to ‘(std::__cxx11::string {aka std::__cxx11::basic_string

    问题: t->package().ship_id(sqlRow[1]);其中 ship_id为 结构体package中的string类型.如下: typedef struct Package{  ...

  5. 使用navicat的坑

    小黄人发送数据,测试软件是否将数据存入mysql数据库中,使用的是navicat. 首先截断了表,所有数据清零,但是此时表并没有回到第一页[由于前面查看最新数据,已经翻到了最后一页],然后小黄人发数据 ...

  6. 使用wkhtmltopdf将多个html批量转成pdf

    相关工具:wkhtmltopdf 场景:比如笔者有 ognl中文文档,全部是html,现在想把它转成pdf,放到ipad阅读,文件如下: 下载好wkhtmltox(本地安装目录 D:\develop\ ...

  7. Windows自动计划任务与ParamStr详解

    ParamStr函数: ParamStr(1),..ParamStr(N) ParamStr(1)代表程序入口的第一个参数,同理,ParamStr(N)代表第N个参数.可通过如下操作进行参数的赋值. ...

  8. [Log4j使用教程] JavaSE/JavaEE/SpringMVC中使用Log4j

    要想使用Log4j, 首先需要下载到Log4j的jar, Download: http://www.apache.org/dyn/closer.cgi/logging/log4j/1.2.17/log ...

  9. Docker快速入门——Docker-Compose

    一.Docker-Compose简介 1.Docker-Compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.Docker-Com ...

  10. [LintCode] 619 Binary Tree Longest Consecutive Sequence III 二叉树最长连续序列 III

    Given a k-ary tree, find the length of the longest consecutive sequence path. The path could be star ...