组件切换方式(Vue.js)
这里,我用一个注册登录两组件的切换实例来演示:
切换方式一
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
</head> <body>
<div id="app">
<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 src="./lib/vue-2.4.0.js"></script> <script type="text/javascript">
Vue.component('login', {
template: '<h3>登录组件</h3>'
}); Vue.component('register', {
template: '<h3>注册组件</h3>'
}); const vm = new Vue({
el: '#app',
data: {
flag: true
},
});
</script>
</body> </html>
这个方式唯一的缺陷就是只能在两个组件之前切换,当要求需要三个及三个以上的组件切换的时候,这就不行了(原因是 flag 只有 true 和 false 两个值),这就要要使用 方式二了。
切换方式二
这里,我们需要学到一个 Vue 官方 提供的 元素 component。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
</head> <body>
<div id="app">
<a href="#" @click.prevent="comName = 'login'">登录</a>
<a href="#" @click.prevent="comName = 'register'">注册</a>
<!--
Vue 提供的 component 来展示对应名称的组件
component 是一个占位符
:is 属性指定 组件名称
-->
<component :is="comName"></component> </div> <script src="./lib/vue-2.4.0.js"></script> <script type="text/javascript">
// 组件名称是字符串
Vue.component('login', {
template: '<h3>登录组件</h3>'
}); Vue.component('register', {
template: '<h3>注册组件</h3>'
}); const vm = new Vue({
el: '#app',
data: {
comName: 'login'// 当前 component 中的 :is 绑定的组件名称
},
});
</script>
</body> </html>
现在,我们在添加一个退出组件(这是为了证明第二种组件切换方式的好处)
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
</head> <body>
<div id="app">
<a href="#" @click.prevent="comName = 'login'">登录</a>
<a href="#" @click.prevent="comName = 'register'">注册</a>
<a href="#" @click.prevent="comName = 'out'">退出</a>
<!--
Vue 提供的 component 来展示对应名称的组件
component 是一个占位符
:is 属性指定 组件名称
-->
<component :is="comName"></component>
</div> <script src="./lib/vue-2.4.0.js"></script> <script type="text/javascript">
// 组件名称是字符串
Vue.component('login', {
template: '<h3>登录组件</h3>'
}); Vue.component('register', {
template: '<h3>注册组件</h3>'
}); Vue.component('out', {
template: '<h3>退出组件</h3>'
}); const vm = new Vue({
el: '#app',
data: {
// 默认显示 登录组件
comName: 'login'// 当前 component 中的 :is 绑定的组件名称
},
});
</script>
</body> </html>
切换成功。
组件切换方式(Vue.js)的更多相关文章
- 第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue.js 2.x:组件的定义和注册(详细的图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- Vue系列之 => 组件切换
组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...
- Vue.js——60分钟组件快速入门(上篇)
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- Centos7离线部署docker
下载docker离线包 wget https://download.docker.com/linux/static/stable/x86_64/docker-19.03.5.tgz 解压 tar -x ...
- RMP和YUM软件安装
1.卸载RPM包 rpm -e rpm包的名称 2.安装rpm包 rmp -ivh xxx.rpm 3.查询yum服务器是否有需要安装的软件 yum list|grep xxx软件列表 4.yum安装 ...
- MySQL 五大引擎之间的区别和优劣之分
MySQL五大引擎介绍: MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型INNODB和BERKLEY(BDB) ISAM:ISAM是一个定义明确且历经时间考验的数据表格管理方 ...
- selenium--多窗口操作
前戏 想一想,我们为什么要获取窗口句柄呢?有什么用呢? 来假设一下,我们打开了一个网站,点击了一个按钮,新打开了一个页面,我们在新页面操作完成之后,需要回到原来的页面继续操作,这时候你如果继续操作原来 ...
- Elasticsearch的null values
很多时候,我们需要面临null值的烦扰,查询es时传入null值是要查询出null的数据还是不查这个field呢,稍有不慎就会引发新的bug,这的确是个问题! null_value 意味着无法索引或搜 ...
- tcp & 长连接 短连接
参考文档: tcp协议 http://blog.chinaunix.net/uid-26833883-id-3627644.html 长连接和短连接 http://blog.csdn.net/free ...
- libevent笔记5:水位watermarks
bufferevent中提供了对读写回调的触发条件及最大缓存长度的设置,即低高水位: 低水位:是读写回调函数的最低触发数据长度,当输入/输出缓存区中的数据长度小于低水位时,读/写回调函数不会被触发: ...
- Python 的 Pandas 对矩阵的行进行求和
Python 的 Pandas 对矩阵的行进行求和: 若使用 df.apply(sum) 方法的话,只能对矩阵的列进行求和,要对矩阵的行求和,可以先将矩阵转置,然后应用 df.apply(sum) 即 ...
- AKKA事件机制
AKKA Event Bus 事件机制就用于当前运行环境,与集群环境不同,详细见AKKA 集群中的发布与订阅Distributed Publish Subscribe in Cluster 简单实现示 ...
- Spring Boot 嵌入式 Tomcat 文件上传、url 映射虚拟路径
1.Java web 应用开发完成后如果是导入外置的 Tomcat 的 webapps 目录的话,那么上传的文件可以直接的放在应用的 web 目录下去就好了,浏览器可以很方便的进行访问. 2.Spri ...