VUE-v-if和v-else的使用
1、v-if和v-else
<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>
注:v-if为真 时,显示v-if的内容,否则显示v-else的内容
2、v-show
<h2 v-show="true">显示我</h2>
注:v-if和v-show的区别
v-if和v-show的作用都把内容显示和隐藏,不同的是,v-if在元素隐藏的时候,是把整个DOM元素删除。v-show是在DOM元素上添加一个样式,把内容隐藏起来。
****用法:当内容需要频繁切换的时候,就用v-show,反之则用v-if
****切换登录方式小案例(v-if \ v-else)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<!-- <h2 v-if="isShow">v-if</h2>
<h2 v-else>v-else</h2> -->
<span v-if="isShow">
<label for="user">密码登录</label>
<input type="text" id="user" placeholder="请输入你的QQ">
</span>
<span v-else>
<label for="email">邮箱登录</label>
<input type="text" id="email" placeholder="请输入你的邮箱">
</span>
<button @click="change()">切换方式</button>
</div> <body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
isShow: true
}),
methods: {
change: function () {
this.isShow = !this.isShow
console.log(this.isShow)
}
}
})
</script>
</body> </html>
注:input的复用问题
当切换方式发生改变的时候,输入框里面的内容不会清空
这是因为VUE后台处理的原因。
1、因为邮箱登录和密码登录不能同时出现
2、在内容渲染到页面的时候,VUE会创建一个虚拟DOM
所以当邮箱登录和密码登录相互切换的时候,因为组成他们的DOM元素是一样的,为了提升性能,VUE后台作出处理,当DOM元素相同时,它会复用之前的那个DOM,所以导致切换登录方式后,input里面的内容不会改变。其实他们用的就是同一个input.
解决方案
<label for="user">密码登录</label>
<input type="text" id="user" placeholder="请输入你的QQ" key="a">
在input里面加上一个key---唯一标识
当两个input里面的key相同时,input就会复用,反之就不会复用
VUE-v-if和v-else的使用的更多相关文章
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- POJ2762 Going from u to v or from v to u(单连通 缩点)
判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...
- Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Description I ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- [强连通分量] POJ 2762 Going from u to v or from v to u?
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17089 ...
- POJ2762 Going from u to v or from v to u?(判定单连通图:强连通分量+缩点+拓扑排序)
这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...
- poj 2762 Going from u to v or from v to u?
题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...
- POJ 2762 Going from u to v or from v to u? (强连通分量缩点+拓扑排序)
题目链接:http://poj.org/problem?id=2762 题意是 有t组样例,n个点m条有向边,取任意两个点u和v,问u能不能到v 或者v能不能到u,要是可以就输出Yes,否则输出No. ...
- poj 2762 Going from u to v or from v to u?(强连通分量+缩点重构图+拓扑排序)
http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: ...
- POJ 2762 Going from u to v or from v to u?(强联通 + TopSort)
题目大意: 为了锻炼自己的儿子 Jiajia 和Wind 把自己的儿子带入到一个洞穴内,洞穴有n个房间,洞穴的道路是单向的. 每一次Wind 选择两个房间 x 和 y, 让他的儿子从一个房间走到 ...
随机推荐
- web-天下武功唯快不破
没有武术是不可摧毁的,而最快的速度是获得长期成功的唯一途径.>>>>>> ----你必须尽可能快地做到这一点!---- <<<<<&l ...
- 使用angularJS接收json数据并进行数据的显示
1.引入JS <script type="text/javascript" src="../plugins/angularjs/angular.min.js&quo ...
- windows上传文件到 linux的hdfs
一.windows上传文件到 linux的hdfs 1.先在 centos 上开启 hdfs, 用 jps 可以看到下面信息, 说明完成开启 2.在win上配置 hadoop (https://www ...
- 使用 SQLContext 可以从现有的 RDD 或数据源创建 DataFrames 报错?
报错情况: 解决方法: SQLContext可能需要自己创建. 所以,先运行var sqlContext=new org.apache.spark.sql SQLContext(sc).即可. 之后再 ...
- 8.Vue的slot
1.什么是slot 在 Vue.js 中我们使用 <slot> 元素作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中 2.使用 建立组件预留插槽 定义填充入插槽 ...
- 重装系统的jdk问题???
重装系统了!!!! 之前因为不懂电脑,然后自己动手装了台台式机,简直太开心了,又自己装了个系统,一切都非常欢乐,来到了给电脑起名字的时候,我不知道有多少人会卡在起名字这里,但是我那个时候非常开心,就想 ...
- 来吧!一文彻底搞定Vue组件!
作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子 ...
- [LeetCode] 527. Word Abbreviation 单词缩写
Given an array of n distinct non-empty strings, you need to generate minimal possible abbreviations ...
- 《Linux就该这么学》培训笔记_ch02_一些必须掌握的Linux命令
本文在原来作者的基础上做一些符合自己的修改.原文参考: <Linux就该这么学>培训笔记_ch02_一些必须掌握的Linux命令. 本章的内容虽然多,基本都是书本原话,但是笔记能精 ...
- Maven介绍及环境搭建
Maven介绍及环境搭建 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建.报告和文档的软件项目管理工具. 下载Maven boot:类加载器框架,Maven使用它加在自 ...