Vue.js 条件渲染 v-if、v-show、v-else
v-if
v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<p v-if="greeting">Hello</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm2 = new Vue({
el:'#example',
data:{
greeting:true //或false
}
})
</script>
</body>
</html>
|
greeting取值为true，效果截图：
greeting取值为false，效果截图：
template v-if
因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把<template>元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含它。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph1</p>
<p>Paragraph2</p>
</template>
</div>
<script src="js/vue.js"></script>
<script>
var vm3 = new Vue({
el:'#example',
data:{
ok:true
}
})
</script>
</body>
</html>
|
在切换v-if模块时，Vue.js有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。
v-if是惰性的--如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show简单得多----元素始终被编译并保留，只是简单地基于CSS切换。
v-show
v-show 根据表达式的值来显示或隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display:none"。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="example">
<p v-show="greeting">Hello</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm2 = new Vue({
el:'#example',
data:{
greeting:false //true
}
})
</script>
|
greeting取值为false，效果截图：
greeting取值为true，效果截图：
注意：v-show不支持<template>语法
现在做一个小的demo，要求是如果文本框里面的内容为空是提示用户输入内容，有内容输入时，刚才的提示内容消失并出现一个提交的按钮
|
1
2
3
4
5
6
7
8
9
10
|
<div id="app">
<form>
<div class="error" v-show="!msg">The text area can not be empty</div>
<textarea v-model="msg"></textarea><br/>
<button v-show="msg">Send Message</button>
</form>
<pre>
{{$data|json}}
</pre>
</div>
|
|
1
2
3
4
5
6
|
new Vue({
el:'#app',
data:{
msg:''
}
}) |
在上面的例子中，声明一个空的字符串msg，当不存在msg的时候，提示内容的div里面v-show为true；存在msg的时候，button里面v-show为true
通常，我们用jquery实现的时候都是去判断输入框内容是否为空，这里一样可以用条件判断 v-if 的方式去实现，但是与v-show有区别
|
1
2
3
4
5
6
7
8
9
10
|
<div id="app">
<form>
<div class="error" v-if="!msg">The text area can not be empty</div>
<textarea v-model="msg"></textarea><br/>
<button v-show="msg">Send Message</button>
</form>
<pre>
{{$data|json}}
</pre>
</div>
|
随着内容输入，class为error的div整个消失了，而使用v-show的时候，只是把display属性设置为none
一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。
v-else 顾名思义，v-else就是Javascript中else的意思，它必须跟着v-if或v-show，充当else功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id="example">
<p v-if="ok">我是对的</p>
<p v-else="ok">我是错的</p>
</div><script src="js/vue.js"></script>
<script> var vm3 = new Vue({
el:'#example',
data:{
ok:false
}
})
</script> |
将v-show用在组件上时，因为指令的优先级v-else会出现问题，所以不要这样做
<custom-component v-show="condition"></custom-component>
我们可以用另一个v-show替换v-else
<custom-component v-show="condition"></custom-component>
<p v-show="condition">这可能也是一个组件</p>
Vue.js 条件渲染 v-if、v-show、v-else的更多相关文章
- vue.js条件渲染 v-if else-if v-for
v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...
- 第六十三篇：Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
- Vue v-if条件渲染
1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- VUE：条件渲染和列表渲染
条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- 前端框架之Vue(5)-条件渲染
v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...
- vue基础——条件渲染
一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...
- vue基础---条件渲染
(1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...
随机推荐
- LoadRunner从入门到实战学习路线（持续更新中...)
写在前面 我是一个测试工程师,从土木工程行业转行到互联网行业,目前是工作的第三年.平时主要做功能测试,性能测试接触比较少,虽然以前培训的时候学习过一些性能相关的知识,但都是入门初级的知识 ...
- Linux管理，例行性工作，at和cron
at 仅执行一次就结束调度(服务atd必须启动) at的配置信息 1.我们设定的at进程其实都是被以文本的方式写入到/var/spool/at/目录内,然后这些设定的进程便会等待atd服务来启动这些进 ...
- Linux如何配制Tcl编程环境
首先,打开终端. 接着在终端输入以下命令: sudo apt-get install tcl
- NHibernate COUNT(*) 统计问题
NHibernate这个框架用了有一年多了,相对有很大的优势,可以省去很多写Sql的时间. 但是如果你想用它做统计,那么有点抱歉,只能手动写写了.它内置的东西很难符合你的需求. 我遇到的问题是这样的. ...
- spring-cloud feign的多参数传递方案
查看原文 一.GET请求多参数URL 1.方法一(推荐) @FeignClient(“microservice-provider-user”) public interface UserFeignCl ...
- Thymeleaf+SpringBoot+Mybatis实现的家庭财务管理系统
项目简介 项目来源于:https://gitee.com/darlingzhangsh/graduation_project 本系统是基于Thymeleaf+SpringBoot+Mybatis.是非 ...
- posix系统线程调度-设置线程优先级
#include <thread> #include <mutex> #include <iostream> #include <chrono> #in ...
- vueCli 运行报错
error 如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! shopping@0.1.0 serve: `vue-cli-service ...
- redis 分布式锁的 5个坑，真是又大又深
引言 最近项目上线的频率颇高,连着几天加班熬夜,身体有点吃不消精神也有些萎靡,无奈业务方催的紧,工期就在眼前只能硬着头皮上了.脑子浑浑噩噩的时候,写的就不能叫代码,可以直接叫做Bug.我就熬夜写了一个 ...
- 详解PHP反序列化中的字符逃逸
首发先知社区,https://xz.aliyun.com/t/6718/ PHP 反序列化字符逃逸 下述所有测试均在 php 7.1.13 nts 下完成 先说几个特性,PHP 在反序列化时,对类中不 ...