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>

 

posted @ 2017-09-07 21:51  蓝色帅-橙子哥  阅读(560)  评论(0)  编辑  收藏  举报