<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

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

   </head>

   <body>

       <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>

       <script>

       Vue.component('login',{

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

       })

         Vue.component('register',{

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

       })

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           flag:false

         },

         methods:{}

           });

       </script>

   </body>

 </html>

第六章 组件 58 组件切换-使用v-if和v-else结合flag进行切换的更多相关文章

  1. 第六章、forms组件

    目录 第六章.forms组件 一.注册功能手写 二.forms组件完整写法 基本使用 三.forms组件前端渲染标签组件 三.forms组件其他知识点 在python console测试 校验数据 f ...

  2. 第六章：四大组件之Activity

    tivityActivity作为Android四大组件之一,也是其中最重要的一个组件.作为一个与用户交互的组件,我们可以把Activity比较成为windows系统上的一个文件夹窗口,是一个与用户交互 ...

  3. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  4. ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性

    原文:ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性 深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开 ...

  5. 第六章、ajax方法以及序列化组件

    目录 第六章.ajax方法 一.choice参数介绍 二.MTV与MVC模型 三.ajax方法 四.案例 五.Ajax传json格式的数据 六. AJAX传文件 代码如下 ajax传文件需要注意的事项 ...

  6. 第九章：四大组件之Broadcast Receiver

    第九章:四大组件之Broadcast Receiver   一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...

  7. Java核心技术卷一基础知识-第9章-Swing用户界面组件-读书笔记

    第9章 Swing用户界面组件 本章内容: * Swing与模型-视图-控制器设计模式 * 布局管理概述 * 文本输入 * 选择组件 * 菜单 * 复杂的布局管理 * 对话框 本章将介绍构造功能更加齐 ...

  8. Laxcus大数据管理系统2.0（9）- 第七章 分布任务组件

    第七章 分布任务组件 Laxcus 2.0版本的分布任务组件,是在1.x版本的基础上,重新整合中间件和分布计算技术,按照新增加的功能,设计的一套新的.分布状态下运行的数据计算组件和数据构建组件,以及依 ...

  9. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 虚树+【BZOJ2286】【SDOI2011】消耗战（虚树）（DP）

    先看一道题: [BZOJ2286][SDOI2011]消耗战 Description 在一场战争中,战场由n个岛屿和n−1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总 ...

  2. idea的spring整合基于xml文件配置的mybatis报Invalid bound statement (not found): com.music.dao.MusicDao.findAll的问题

    一. 题主当时就是自己尝试整合spring和mybatis的时候遇到了这个问题,当时题主只看到了用注解的方式配置的dao层,题主用的是xml文件配置的形式, 而且坑爹的是题主的两个文件的路径写的也不一 ...

  3. [转帖]12条用于Linux的MySQL/MariaDB安全最佳实践

    12条用于Linux的MySQL/MariaDB安全最佳实践 2018-01-04 11:05:56作者:凉凉_,soaring稿源:开源中国社区 https://ywnz.com/linuxysjk ...

  4. Java基础 面试总结（一）

    一.java基础篇-概念 1.简述你所知道的Linux: Linux起源于1991年,1995年流行起来的免费操作系统,目前, Linux是主流的服务器操作系统, 广泛应用于互联网.云计算.智能手机( ...

  5. VC/MFC 进程间通信方法总结

    摘   要   随着人们对应用程序的要求越来越高,单进程应用在许多场合已不能满足人们的要求.编写多进程 / 多线程程序成为现代程序设计的一个重要特点,在多进程程序设计中,进程间的通信是不可避免的. M ...

  6. ThinkPHP composer的安装，及image图像处理类库的加载

    以下教程针对windows系统,示例系统使用win7 composer安装 下载composer安装包,点击安装. 出现'composer choose the command-line php' 要 ...

  7. navicat 使用 pymysql模块

    新健库 ,新增字段+类型+约束 设计表:外键(自增) 新建查询 建立表模型 /* 数据导入: Navicat Premium Data Transfer Source Server : localho ...

  8. X86逆向1：软件破解入门课【课件下载】

    从本节课开始,我将带领小白入门学习软件破解的相关内容,大佬绕过,以后将会定期更新从最基本的破解知识点开始学习,由简单到复杂循序渐进,难度会逐步提高. 为了防止版权方面的争议,我将自行编写一些破解案例来 ...

  9. Java 面向对象的设计原则

    一. 1.面向对象思想的核心: 封装.继承.多态.   2.面向对象编程的追求: 高内聚低耦合的解决方案: 代码的模块化设计: 3.什么是设计模式: 针对反复出现的问题的经典解决方案,是对特定条件下( ...

  10. mybatis 延迟加载学习

    一.什么是延迟加载 resultMap可实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...