组件切换-使用 v-if 和 v-else 结合 flag 进行切换|学习笔记

简介: 快速学习组件切换-使用 v-if 和 v-else 结合 flag 进行切换

开发者学堂课程【Vue.js 入门与实战组件切换-使用 v-if 和 v-else 结合 flag 进行切换】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8180


组件切换-使用 v-if 和 v-else 结合 flag 进行切换


一、v-if 和 v-else 组件切换

实现不同组件的切换,在Vue里怎么实现两个组件的切换,新建一个 html。

1.首先要有两个组件

<script>   vue.component(‘login’,{template:’<h3>登录组件</h3>’ })vue.component(‘register’,{template:’<h3>注册组件</h3>’ })

2.实现点击链接,让这两个组件实现切换

例:<div id=”app”><a href=”” >登录</a><a href=”” >注册</a>

3.把这两个组件往页面上引用一下,再右键浏览

<login v-if=”flag”></login><register v-else=”flag”></register></div>

4.两个都显示出来了,默认只展示登录不展示注册

var vm = new vue({     el:’#app’,     data:{        flag:true     },     methods:{}   })

5. 如果 flag 为 t rue 只展示 login 不展示 register

<login v-if="flag"></login>  <register v-else="flag"></register>

6. 注册组件和登录组件展示与否是由flag来实现,点击登录和注册时修改 flag 的值

7. 在a标签里添加点击事件

<a href=”” @click.prevent=”flag=ture”>登录</a><a href=””  @click.prevent=”flag=false”>注册</a>

 

相关文章
|
8月前
|
人工智能 自然语言处理 监控
大语言模型的解码策略与关键优化总结
本文系统性地阐述了大型语言模型(LLMs)中的解码策略技术原理及其应用。通过深入分析贪婪解码、束搜索、采样技术等核心方法,以及温度参数、惩罚机制等优化手段,为研究者和工程师提供了全面的技术参考。文章详细探讨了不同解码算法的工作机制、性能特征和优化方法,强调了解码策略在生成高质量、连贯且多样化文本中的关键作用。实例展示了各类解码策略的应用效果,帮助读者理解其优缺点及适用场景。
819 20
大语言模型的解码策略与关键优化总结
学妹跑过来问我为啥Xshell 打不开了,让我帮她处理下【手把手讲解】
学妹跑过来问我为啥Xshell 打不开了,让我帮她处理下【手把手讲解】
学妹跑过来问我为啥Xshell 打不开了,让我帮她处理下【手把手讲解】
|
Prometheus 监控 Cloud Native
如何优化Java中的数据库连接池配置?
如何优化Java中的数据库连接池配置?
|
11月前
|
Java 测试技术 Maven
Maven clean 提示文件 java.io.IOException
在使用Maven进行项目打包时,遇到了`Failed to delete`错误,尝试手动删除目标文件也失败,提示`java.io.IOException`。经过分析,发现问题是由于`sys-info.log`文件被其他进程占用。解决方法是关闭IDEA和相关Java进程,清理隐藏的Java进程后重新尝试Maven clean操作。最终问题得以解决。总结:遇到此类问题时,可以通过任务管理器清理相关进程或重启电脑来解决。
|
JSON Java 数据格式
使用postMan调试接口出现 Content type ‘multipart/form-data;charset=UTF-8‘ not supported“
本文介绍了使用Postman调试接口时遇到的“Content type ‘multipart/form-data;charset=UTF-8’ not supported”错误,原因是Spring Boot接口默认只接受通过`@RequestBody`注解的请求体,而不支持`multipart/form-data`格式的表单提交。解决方案是在Postman中将请求体格式改为`raw`并选择`JSON`格式提交数据。
使用postMan调试接口出现 Content type ‘multipart/form-data;charset=UTF-8‘ not supported“
|
JSON 前端开发 JavaScript
JSON parse error: Cannot deserialize value of type `java.lang.Integer` from Boolean value
这篇文章讨论了前端Vue应用向后端Spring Boot服务传输数据时发生的类型不匹配问题,即后端期望接收的字段类型为`int`,而前端实际传输的类型为`Boolean`,导致无法反序列化的问题,并提供了问题的诊断和解决方案。
JSON parse error: Cannot deserialize value of type `java.lang.Integer` from Boolean value
|
消息中间件 存储 Cloud Native
深度剖析 RocketMQ 5.0,架构解析:云原生架构如何支撑多元化场景?
了解 RocketMQ 5.0 的核心概念和架构概览;然后我们会从集群角度出发,从宏观视角学习 RocketMQ 的管控链路、数据链路、客户端和服务端如何交互;学习 RocketMQ 如何实现数据的存储,数据的高可用,如何利用云原生存储进一步提升竞争力。
142794 3
|
Java API 开发者
|
监控 数据安全/隐私保护
若依修改---功能详解--权限控制,demo超级管理员,可以查看所有功能菜单,zhangsan,登录之后,仅可以查看线索的菜单,不同角色岗位,登录查看的内容不同,若依通过用户管理,角色管理,菜单管理控
若依修改---功能详解--权限控制,demo超级管理员,可以查看所有功能菜单,zhangsan,登录之后,仅可以查看线索的菜单,不同角色岗位,登录查看的内容不同,若依通过用户管理,角色管理,菜单管理控
|
前端开发 JavaScript 程序员
一文搞懂:关于Defferred对象知识详解
一文搞懂:关于Defferred对象知识详解
225 0