vue2.0版本指令v-if与v-show的区别

Posted 2020-10-06 鱼樱、、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2.0版本指令v-if与v-show的区别相关的知识，希望对你有一定的参考价值。

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。

v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-if示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue2.2.js"></script>
    </head>

    <body>
        <!--与v-else一样，v-else-if 必须要在v-if或者-else-if之后-->
        <div id="app">
            <h1>hello,VueJs</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age>=25">Age1:{{age}}</h1>
            <h1 v-else-if="age<25">Age2:{{age}}</h1>
            <h1 v-if="name.indexOf(‘ab‘)>=0">name1:{{name}}</h1>
            <h1 v-else>Name2:{{name}}</h1>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    yes: true,
                    no: false,
                    age: 18,
                    name: "Mr.lan"
                }
            })
        </script>
    </body>

</html>

v-show示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
    </head>
    <body>
        <!--注意v-show不支持<template>语法
        注意v-show的元素会始终渲染并保持在DOM中，v-show是简单的切换元素的css属性display-->
        <div id="app">
            <p v-show="ok">v-show演示1</p>
            <p v-show="!ok">v-show演示2</p>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    ok:false
                }
            })
        </script>
    </body>
</html>

以上是关于vue2.0版本指令v-if与v-show的区别的主要内容，如果未能解决你的问题，请参考以下文章

v-if与v-show的区别

v-show 与 v-if区别

Vue指令

vue使用v-if v-show页面闪烁，div闪现的解决方法

Vue指令—v-ifv-show二者用法及区别

1.4 Vue v-if,v-show与v-for指令