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>


本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1873289

Vue.js 条件渲染 v-if、v-show、v-else的更多相关文章

  1. vue.js条件渲染 v-if else-if v-for

    v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...

  2. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  3. Vue v-if条件渲染

    1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  4. VUE：条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  6. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  7. 前端框架之Vue(5)-条件渲染

    v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...

  8. vue基础——条件渲染

    一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...

  9. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

随机推荐

  1. PTA | 1012 数字分类 (20分)

    给定一系列正整数,请按要求对数字进行分类,并输出以下 5 个数字: A1 = 能被 5 整除的数字中所有偶数的和: A2 = 将被 5 除后余 1 的数字按给出顺序进行交错求和,即计算 n1−n2+n ...

  2. es elasticsearch 6/7 设置内存方法

    es节点的默认的heap内存大小是 1G 大小,在实际生产中,很容易导致内存溢出而导致进程被kill掉.所以我们一般会自己配置自己的,2.x的版本可以通过export ES_HEAP_SIZE=10g ...

  3. Python操作rabbitmq系列（五）:根据主题分配消息

    接着上一章,使用exchange_type='direct'进行消息传递.这样消息会完全匹配后发送到对应的接收端.现在我们想干这样一件事: C1获取消息中包含:orange内容的消息,并且消息是由3个 ...

  4. 【学习笔记】Iperf3网络性能测试工具

    [学习笔记]Iperf3网络性能测试工具 网络性能评估主要是监测网络带宽的使用率,将网络带宽利用最大化是保证网络性能的基础,但是由于网络设计不合理.网络存在安全漏洞等原因,都会导致网络带宽利用率不高. ...

  5. http的请求头都有那些信息

    每个HTTP请求和响应都会带有相应的头部信息.默认情况下,在发送XHR请求的同时,还会发送下列头部信息: Accept:浏览器能够处理的内容类型 Accept-Charset:浏览器能够显示的字符集 ...

  6. shell map数据结构的实现

    前言     Bash默认不支持二维数组,如果我们想实现map 数据结构,可以安装如下的方式来进行构造   预备知识     eval:  它是shell内建命令,用于字符串的解析.它会首先扫描命令行 ...

  7. java 泛型实例详解（普通泛型、 通配符、 泛型接口）

    java 泛型详解(普通泛型. 通配符. 泛型接口) 2013-02-04 19:49:49| 分类: JAVA | 标签:java |举报|字号 订阅 下载LOFTER客户端 JDK1.5 令我们期 ...

  8. wireshark没有找到接口

    今天安装wireshark,打开发现显示没有找到接口,网上搜索发现出现这种问题的都是win10,但是我的是win7 看了一下win10这种问题的原因是自带的winpcap不支持win10,应到http ...

  9. 聊聊Disruptor 和 Aeron 这两个开源库

    Disruptor The best way to understand what the Disruptor is, is to compare it to something well under ...

  10. Unity 随机地图房间通道生成

    之前的博客中已经说了随机房间生成: https://www.cnblogs.com/koshio0219/p/12604383.html 但实现房间生成只是整个地图生成最初最简单的一步.下面讨论如何随 ...