v-if

v-if主要用来进行条件渲染。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<p v-if="message">message</p>
<p v-if="infor">infor</p>
</div>
<script>
var demo1 = new Vue({
el:'#demo',
data:{
message:true,
infor:false
},
})
</script>
</body>
</html>

v-if的简单用法如上面所示,当值为true时进行渲染,当值为false时,页面中不会进行渲染。

v-else和v-else-if

我们可以使用 v-else 指令来表示 v-if 的“else 块”,v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”,可以链式地使用多次。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<p v-if="message">hello</p>
<button @click="A">点我</button>
<div v-if="type === 1">A</div>
<div v-else-if="type === 2">B</div>
<div v-else-if="type === 3">C</div>
<div v-else>D</div>
<button @click="B">点我</button>
</div>
<script>
var demo1 = new Vue({
el:'#demo',
data:{
message:true,
type:0
},
methods:{
A:function(){
this.message=false
},
B(){
if(this.type > 6){
this.type = 1;
}else{
this.type++;
}
},
}
})
</script>
</body>
</html>

在上面的例子中,通过点击事件改变了type的值,从而改变了页面元素的渲染。

用 key 管理可复用的元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<span v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" >
</span>
<span v-else>
<label>Email</label>
<input placeholder="Enter your email address" >
</span>
<button v-on:click="test">切换</button>
</div>
<script>
var demo1 = new Vue({
el:'#demo',
data:{
loginType: 'username'
},
methods:{
test:function(){
if(this.loginType != 'username'){
return this.loginType = 'username'
}
return this.loginType = 'email'
}
}
})
</script>
</body>
</html>

在上面的例子中,首先显示的是用户名输入框,点击切换后显示的邮箱输入框,一切都很正常。但是当我们在用户名输入框中输入相应内容后再点击切换,会发现我们刚刚输入的用户名出现在了邮箱处:

之所以会出现这种情况,是因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做,除了使 Vue 变得非常快之外,还有一些有用的好处。所以,在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder

虽然这样能高效快速的渲染元素,但是又很多实际情况是不希望元素被复用的,要解决上面的问题,除了将元素再进行包裹外,Vue 还提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可:

<div id="demo">
<span v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</span>
<span v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</span>
<button v-on:click="test">切换</button>
</div>

这样就可以按照实际运用情况来处理不希望被复用的元素了,需要注意的时,在这里<label> 元素仍然会被高效地复用,因为它们没有添加 key 属性。

v-if和v-show

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

例如在上面的第一个例子中,页面中渲染了一个p元素,页面结构如下:

可是当我们将v-if换成v-show时,页面上依旧只显示了一个p元素,但页面结构却不一样了。

<body>
<div id="demo">
<p v-show="message">message</p>
<p v-show="infor">infor</p>
</div>
<script>
var demo1 = new Vue({
el:'#demo',
data:{
message:true,
infor:false
},
})
</script>
</body>

也就说,虽然第二个p元素没有显示出来,但是页面渲染时是存在的,只是多了一个隐藏属性。

通过上面的例子,我们不难发现两者的不同:

  • v-if是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • v-if是惰性的,只有当条件为true时才会渲染,如果条件为false则什么都不做
  • v-if有很高的切换开销,适用于条件不太容易改变的时候
  • v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
  • v-show有很高的初始渲染开销,适用于非常频繁地切换

vue之v-if和v-show的更多相关文章

  1. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  2. POJ2762 Going from u to v or from v to u(单连通 缩点)

    判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...

  3. 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 ...

  4. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  5. [强连通分量] 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 ...

  6. POJ2762 Going from u to v or from v to u?(判定单连通图:强连通分量+缩点+拓扑排序)

    这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...

  7. poj 2762 Going from u to v or from v to u?

    题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...

  8. 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. ...

  9. 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:  ...

  10. POJ 2762 Going from u to v or from v to u?(强联通 + TopSort)

    题目大意: 为了锻炼自己的儿子 Jiajia 和Wind 把自己的儿子带入到一个洞穴内,洞穴有n个房间,洞穴的道路是单向的. 每一次Wind 选择两个房间  x 和 y,   让他的儿子从一个房间走到 ...

随机推荐

  1. 20155208徐子涵 2016-2017-2 《Java程序设计》第9周学习总结

    20155208徐子涵 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1 JDBC入门 撰写应用程序是利用通信协议对数据库进行指 ...

  2. Spark各个版本新特性

    后续会添加spark生态系统中各个组件的兼容支持情况... Spark2.0.0 * 2016-07-27正式发布 * 它是2.x版本线的上的第一个版本. * 300位contributors的超过2 ...

  3. 实验吧—Web——WP之 what a fuck!这是什么鬼东西?

    打开链接——> 发现是一大堆符号,可能有些人见过这些样子的,这是一种编码方式,叫:jother编码 jother编码是一种运用于javasscript语言中利用少量字符构造精简的匿名函数方法,对 ...

  4. Java 8 实战

    Java8 函数式接口,方法传递与Lambda Java8新特性 方法作为参数传递给方法,方法成为一等公民 Lambda,匿名函数 Stream API : 将一系列相关操作用流水线的思想分配到CPU ...

  5. linux---文件颜色含义

    下面是linux系统约定不同类型文件默认的颜色: 白色:表示普通文件 蓝色:表示目录 绿色:表示可执行文件 红色:表示压缩文件 浅蓝色:链接文件 红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰 ...

  6. microcks 微服务mocks 工具&&运行时

    microcks 是一个方便的微服务mock 工具,我们可以用来mock request.response,同时获取api 的服务契约,microcks 支持的部署模式也比较多,docker-comp ...

  7. python, 用filter实现素数

    # _*_ coding:utf-8 _*_ #step1: 生成一个序列def _odd_iter(): n = 1 while True: n = n + 1 yield n #Step2: 定义 ...

  8. 原码,反码,补码,及Java中数字表示方法

    原码:原码是符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值. 如:如果是八位二进制1即用00000001表示,-1即用10000001表示. 反码:正数的反码就是其本身,负数的反码是在其 ...

  9. iuplua test failure

    prepared SW  Download from https://sourceforge.net/projects/iup zerobrane Step Write follwiing codes ...

  10. centos7使用163 yum源

    一般是下载 .repo 源即可,但有时候我们需要安装一些额外的包,就需要下载 Extra Packages for Enterprise Linux (EPEL) 源, 比如我们需要用 yum 安装 ...