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的区别的更多相关文章

  1. vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  2. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  3. vue2.0自定义指令的使用方法

    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...

  4. vue2.0 自定义指令详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. vue2.0 v-model指令

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Vue2.0原理-指令

    指令是 模板解析 的续章,本文会尝试从源码的角度来理解 指令 是如何被提取和应用的. 指令的提取 指令的提取过程是在parse阶段进行的,在 parseHTML 方法中,会解析字符串模板为如下的单个a ...

  7. Vue2.0 - 自定义指令 vue-directive

    Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...

  8. vue2.0 自定义指令

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...

  9. vue2.0版本中v-html中过滤器的使用

    Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue ...

随机推荐

  1. IntelliJ IDEA jrebel6 安装，破解

    一.Setting中在线安装JRebel插件,install 二.拷贝下载的jrebel.rar解压后 把里面内容覆盖IDEA插件安装目录中此插件目录之下 下载:http://pan.baidu.co ...

  2. docker启动centos容器后如何用putty连接

    在前面的文章中,我提到过,win10 docker启动容器时,只有配置了宿主机和docker容器的端口映射,外部应用才能访问到容器中的服务,比如映射到Nginx的80端口.现在我将宿主机的某个端口映射 ...

  3. JavaScript基础简要

    JavaScript   引用外部js :   <script src="2.js"type="text/javascript"></scri ...

  4. publish and submit

    http://blog.csdn.net/w_jewelry/article/details/8123639 1.Gerrit里点击“publish and submit”提示如下:Your chan ...

  5. 织梦DEDE系统跨站跨数据库调用数据显示

    调用方法 本标签的调用格式为: {dede:sql sql="一条完整的SQL语句" appname="数据库配置参数"}您的底层模板{/dede:sql} 稍 ...

  6. java虚拟机内存区域理解

    java虚拟机有的区域随着虚拟机进程的启动而存在, 有的区域依赖用户线程的启动和结束而建立和销毁. 程序计数器:为了线程切换后能恢复到正确的执行位置,每个线程都有一个独立的程序计数器.(针对java方 ...

  7. 原生JavaScript之深度克隆

    先看一下克隆成功后的结果 深度克隆就是将obj的属性克隆到obj1上面,并且在obj上面修改属性不影响obj1上面的属性. 1.先把所有的值都遍历一遍(看是引用值和原始值)用for ( var pro ...

  8. 《windows核心编程系列》一谈谈windows中的错误处理机制

    错误处理 我们写的函数会用返回值表示程序执行的正确与否,使用void,就意味着程序一定不会出错.Bool类型标识true时为真,false时为假.其他类型根据需要可以定义成不同意义. Windows除 ...

  9. Hdu 5352 MZL's City (多重匹配)

    题目链接: Hdu 5352 MZL's City 题目描述: 有n各节点,m个操作.刚开始的时候节点都是相互独立的,一共有三种操作: 1:把所有和x在一个连通块内的未重建过的点全部重建. 2:建立一 ...

  10. Zznu 1913: yifan and matrix (多路归并)

    题目链接: 1913: yifan and matrix 题目描述: 有一个n*n的矩阵,在每一行取出一个数,可以得到n个数的和,问前n小的和分别是多少? 解题思路: 对于两个数组a[n],b[n], ...