第六章 组件 58 组件切换-使用v-if和v-else结合flag进行切换
<!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进行切换的更多相关文章
- 第六章、forms组件
目录 第六章.forms组件 一.注册功能手写 二.forms组件完整写法 基本使用 三.forms组件前端渲染标签组件 三.forms组件其他知识点 在python console测试 校验数据 f ...
- 第六章:四大组件之Activity
tivityActivity作为Android四大组件之一,也是其中最重要的一个组件.作为一个与用户交互的组件,我们可以把Activity比较成为windows系统上的一个文件夹窗口,是一个与用户交互 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
- ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性
原文:ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性 深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开 ...
- 第六章、ajax方法以及序列化组件
目录 第六章.ajax方法 一.choice参数介绍 二.MTV与MVC模型 三.ajax方法 四.案例 五.Ajax传json格式的数据 六. AJAX传文件 代码如下 ajax传文件需要注意的事项 ...
- 第九章:四大组件之Broadcast Receiver
第九章:四大组件之Broadcast Receiver 一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...
- Java核心技术卷一基础知识-第9章-Swing用户界面组件-读书笔记
第9章 Swing用户界面组件 本章内容: * Swing与模型-视图-控制器设计模式 * 布局管理概述 * 文本输入 * 选择组件 * 菜单 * 复杂的布局管理 * 对话框 本章将介绍构造功能更加齐 ...
- Laxcus大数据管理系统2.0(9)- 第七章 分布任务组件
第七章 分布任务组件 Laxcus 2.0版本的分布任务组件,是在1.x版本的基础上,重新整合中间件和分布计算技术,按照新增加的功能,设计的一套新的.分布状态下运行的数据计算组件和数据构建组件,以及依 ...
- 从零开始学 Web 之 Vue.js(六)Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- U盘ios系统制作
首先我们先安装软碟通,完成安装后打开软碟通,文件->打开,打开我们的iso镜像 步骤阅读 然后选择我们的U盘 步骤阅读 然后点击启动->写入硬盘映像 步骤阅读 写入方式有zip ...
- 【图像处理】FFmpeg-0
FFmpeg是相当强大的多媒体编解码框架,在深入分析其源代码之前必须要有基本的多媒体基础知识,否则其源代码会非常晦涩难懂.本文将从介绍一些基本的多媒体只是,主要是为研读ffmpeg源代码做准备,比如一 ...
- java api操作
java api操作 导入开发包 将hbase安装包中lib下包导入java项目 创建表 Configuration conf = HBaseConfiguration.create(); c ...
- yaml语言格式
YAML是"YAML Ain't a Markup Language"(YAML不是一种标记语言),强调这种语言以数据做为中心,而不是以置标语言为重点. 转载2篇比较好的关于yam ...
- 小记--------SparkContext初始化原理机制图解
- Java的四层结构dto、dao、service、controller
首先,最底层的就是dto层,dto层就是所谓的model,dto中定义的是实体类,也就是.class文件,该文件中包含实体类的属性和对应属性的get.set方法:<bean> 其次,是da ...
- Spring Boot 面试总结(一)
1.使用 Spring Boot 前景? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用 ...
- 洛谷P1603 斯诺登的密码(水题
不知道什么时候打开的,随手做掉了,没什么用...大概又熟悉了一下map吧...大概........一开始还因为没读清题没把非正规的英文表示数字存进去wa了...orz最近状态不行 题目描述 题目描述 ...
- Number of Containers ZOJ - 3175(数论题)
Problem Description For two integers m and k, k is said to be a container of m if k is divisible by ...
- GCD and LCM HDU - 4497(质因数分解)
Problem Description Given two positive integers G and L, could you tell me how many solutions of (x, ...