Vue.js学习笔记：指令 v-if

Posted 2020-08-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js学习笔记：指令 v-if相关的知识，希望对你有一定的参考价值。

v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。

<!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，效果截图：

因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把<template>元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含它。

<!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-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

v-else 顾名思义，v-else就是javascript中else的意思，它必须跟着v-if或v-show，充当else功能

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