<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="cname='login'">登录</a>
<a href="#" @click.prevent="cname='register'">注册</a>
<!-- component是一个占位符，:is属性，显示组件-->
<!--<component :is="'login'"></component>-->
<component :is="cname"></component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script>
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el:'#app',
data:{
cname:'login'
},
methods:{

}
})
</script>
</body>
</html>

vue动态切换组件的更多相关文章

  1. 第八十七篇：Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  2. vue 如何动态切换组件，使用is进行切换

    日常项目中需要动态去切换组件进行页面展示. 例如:登陆用户是“管理员”或者“普通用户”,需要根据登陆的用户角色切换页面展示的内容.则需要使用 :is 属性进行绑定切换 <template> ...

  3. Vue动态创建组件方法

    组件写好之后有的时候需要动态创建组件.例如: 编辑文章页面,正文是一个富文本编辑器,富文本编辑器是一个第三方的组件,点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢. 富文本编辑器也 ...

  4. vue动态子组件的实现方式

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...

  5. vue动态切换视图

    big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...

  6. Vue内置的Component标签用于动态切换组件

    html <div id="app"> <component :is="cut"></component> <butt ...

  7. 【Html】Vue动态插入组件

    html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...

  8. vue 动态插入组件

    HTML代码: <div id="app"> <p>{{ message }}</p> <button @click="add( ...

  9. vue2.0 动态切换组件

    组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件. <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. 20155324《网络对抗》Exp2 后门原理与实践

    20155324<网络对抗>Exp2 后门原理与实践 20155324<网络对抗>Exp2 后门原理与实践 常用后门工具实践 Windows获得Linux Shell 在Win ...

  2. R语言数据集的技术

    特征值选择技术要点 特征值选择技术要点(特征值分解) 作者:王立敏 文章来源:xiahouzuoxin 一．特征值分解 1.特征值分解 线性代数中,特征分解(Eigendecomposition),又 ...

  3. Java(20)file i/o

    1 I/0: input/output 1.1.java.io.File 1.2  表示:文件或者文件夹(目录) 1.3 File f = new File("文件路径"); 1. ...

  4. openwrt 编译

    完整的编译过程: http://www.280i.com/tech/3353.html源更新: https://blog.csdn.net/ypbsyy/article/details/8121836 ...

  5. EASY-X

    ----------------------- Page 1----------------------- 一 创建新项目 VC 写程序要有项目的概念,一个项目可以有多个 .cpp 文件,多个项目构 ...

  6. Tableau 之一 连接数据源

    导入数据源 与各类数据源建立连接关系,是使用tableau探索分析数据的第一步,本节内容包括: 数据源类型 连接数据源 数据源类型 打开tableau,可以在左侧窗口看到连接选项,目前tableau可 ...

  7. 嵌入式Linux学习路线

    最近比较忙,对于嵌入式的相关学习一直没有很好的开展.今天也看了不少的嵌入式Linux的学习路线,也和几个工作过的朋友聊了聊,想把之后的学习过程记录下来. 自己以后想从事驱动开发这方面的工作,因为大多数 ...

  8. FHQ-Treap小结

    \(Orz\) 范浩强大爷,竟然搞出了如此夺天地造化的数据结构. \(FHQ-Treap\),又名非旋\(Treap\),是范浩强大爷在某些奇特的灵感之下发明的一种平衡树,因其与\(Treap\)相似 ...

  9. redis哨兵主从自动切换

    1.用的是TP5框架,改写框架自带的redis类 thinkphp/library/think/cache/driver/Redis.php //两台服务器都配置好了监控哨兵 //主从配置要设置好密码 ...

  10. gardner 算法matlab实现

    % 仿真4比特原始数据与星座图的编码映射过程: % 完成16QAM信号的调制解调: % 基带信号符号速率 ps ＝1Mbps: % 成形滤波器的滚降因子 a=0.8: % 载波信号频率fc=2MHz ...