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

  <script src="./lib/vue-2.4.0.js"></script>

  <style>

    .v-enter,

    .v-leave-to {

      opacity: 0;

      transform: translateX(150px);

    }

    .v-enter-active,

    .v-leave-active {

      transition: all 0.5s ease;

    }

  </style>

</head>

<body>

  <div id="app">

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

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

    <!-- 通过 mode 属性,设置组件切换时候的 模式 -->

    <transition mode="out-in">

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

    </transition>

  </div>

  <script>

    // 组件名称是 字符串

    Vue.component('login', {

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

    })

    Vue.component('register', {

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

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue 组件切换的更多相关文章

  1. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  2. Vue系列之 => 组件切换

    组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  4. AntDesign vue学习笔记（四）使用组件切换

    同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...

  5. 组件切换方式（Vue.js）

    这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  6. Vue学习之组件切换及父子组件小结（八）

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  7. vue组件开发练习--焦点图切换

    1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...

  8. Vue学习笔记【24】——Vue组件（组件切换）

    使用flag标识符结合v-if和v-else切换组件 页面结构:(缺点:只适用于两个组件间切换,不适合多个)  <div id="app">    <input ...

  9. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

随机推荐

  1. springboot自定义错误页面（转）

    方法一:Spring Boot 将所有的错误默认映射到/error, 实现ErrorController @Controller @RequestMapping(value = "error ...

  2. vue-cli3 搭建的前端项目基础模板

    基于 vue-cli3 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言:less Ajax: ax ...

  3. ANN中乘积量化与多维倒排小结

    目前特征向量的比对加速优化能极大缩短比对耗时,改善用户体验. 优化的途径主要有两种,一是使用指令集(SSE,AVX)加速运算.二是使用ANN替代暴力搜索. 乘积量化和倒排索引组合是ANN中效果较好且实 ...

  4. BZOJ 3057圣主的考验题解

    老师居然考这么毒瘤的题目!!!!! 很容易想到dp,f[i][j]表示有i个节点,左子树的最深深度为j的方案数 枚举左子树有多少节点然后转移,复杂度为n^3 T飞~ 我们考虑到有深度为h的树的节点有多 ...

  5. ThInkPHP加密和解密cookie（登录操作）

    摘自:http://www.thinkphp.cn/code/1794.html 通过加密cookie是网站安全性更高,登录信息不保存在session中在function.php文件在建立两个函数,加 ...

  6. LeetCode ---　Validate Binary Search Tree

    题目链接 判断一颗二叉树是否是二叉搜索树(二叉排序树),也就是BST 如果该二叉树是BST, 那么对其中序遍历,所得序列一定是单调递增的(不考虑有重复数值的情况) 附上代码: /** * Defini ...

  7. LeetCode141 Linked List Cycle. LeetCode142 Linked List Cycle II

    链表相关题 141. Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up:Can y ...

  8. Bellman-Ford（可解决负权边）--时间复杂度优化

    Bellman-Ford 可解决带有负权边的最短路问题 解决负权边和Dijkstra相比是一个优点,Bellman-Ford的核心代码只有4行:: u[],v[],w[] 分别存一条边的顶点.权值,d ...

  9. 遗传算法MATLAB实现(2):一元函数优化举例

    遗传算法提供了一种求解非线性.多模型.多目标等复杂系统优化问题的通用框架. 先从例子开始,慢慢再总结理论... [例]利用遗传算法计算函数f(x)=x*cos(5*pi*x)+3.5在区间[-1,2. ...

  10. TCP/IP协议学习

    计算机网路学得不好,首先先放个OSI七层网络模型吧 在协议的控制下,上层对下层进行调用,下层对上层进行服务, 上下层间用交换原语交换信息.这样可以提高传输速率,并且保证数据安全,所以说其实每一层都有存 ...