1、v-if和v-show都是用来实现条件判断的指令。

2、先看代码

<body>

    <div id="app">

        <button @click="reverse()">click</button>

        <p v-if="flag">这是v-if指令控制</p>

        <p v-show="flag">这是v-show指令控制</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                flag:true

            },

            methods:{

                reverse(){

                    this.flag = !this.flag;

                }

            }

        });

    </script>

</body>

通过点击按钮来控制v-if和v-show对应元素的显示和隐藏。从页面展示现象看，这两个指令的作用是一样的，我们来看下浏览器控制台元素的具体展示情况。

当页面元素隐藏或者显示的时候，v-if每次都会重新删除或创建元素，v-show指令则通过控制样式属性display的值来实现同样的效果。

总结：

1、v-if由于每次都会重新删除或创建元素，所以有较高的切换性能消耗。

2、v-show通过控制样式属性display的值来显示隐藏元素，但是即使你不需要显示，该元素还是被页面渲染了，所以其有较高的初始渲染消耗。

3、具体使用哪一个还是要根据实际的业务场景来判断使用。

每天进步一点点！

Vue学习之路第十五篇：v-if和v-show指令的更多相关文章

  1. vue学习指南：第十五篇(详细) - Vuex

    Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 ...

  2. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  3. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  4. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  5. Vue学习之路第十八篇：私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  6. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  7. FastAPI 学习之路（十五）响应状态码

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  8. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  9. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

随机推荐

  1. 哈理工 oj 2122 旅行（map + 最短路dij算法）

    旅行 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 18(6 users) Total Accepted: 3(3 users) Ra ...

  2. iOS开发-自己定义重用机制给ScrollerView加入子视图

    事实上这个问题我非常早就想过,仅仅是没有通过去写程序实现,昨天有人提起,我就巧了一下 不知道大家打印郭tableview:cellforrow中cell初始的次数,也就是重用池中的cell个数.这个是 ...

  3. Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Linux正則表達式-定位元字符

    有两个元字符用于指定字符串出如今行首或行末.脱字符(^)是指示開始的单字符正則表達式.美元符号($)是指示行结尾的单字符的正則表達式.这些通常称为"定位符",由于它们将匹配限定在特 ...

  5. 设备树学习之（一）GPIO中断【转】

    本文转载自:http://blog.csdn.net/lizuobin2/article/details/54563587 开发板:tiny4412SDK + S702 + 4GB Flash 要移植 ...

  6. Node.js：JXcore

    ylbtech-Node.js:JXcore 1.返回顶部 1. Node.js JXcore 打包 Node.js 是一个开放源代码.跨平台的.用于服务器端和网络应用的运行环境. JXcore 是一 ...

  7. Gym-101915J The Volcano Eruption 计算几何

    题面 题意:给你一个矩阵,然后有很多的圆,这些圆可能相交着,一个或者几个就导致这个矩形被分割开了,就是从最下面的边到上面的边,连线被这些圆阻隔了,每一堆圆当做一个阻碍,问一共有几个阻碍 题解:看起来好 ...

  8. javascript设计模式-单体模式

    场景:假设有一个Girl(美女)实体,该实体拥有姓名.年龄两个属性,拥有显示姓名和洗澡两个方法,下面分步骤构造该实体. 1.用简单基本单体模式: var Girl1 = { name:"昭君 ...

  9. Chrome 行情抓取插件

    Chrome 行情抓取插件 上班想偷偷摸摸看行情?自己动手写插件啊,尝试写了一个,新建文件夹,命名为StockMonitor,放入文件如下: 3个.png图标文件,19X19.48X48.128X12 ...

  10. 二次排序问题（分别使用Hadoop和Spark实现）

    不多说,直接上干货! 这篇博客里的算法部分的内容来自<数据算法:Hadoop/Spark大数据处理技巧>一书,不过书中的代码虽然思路正确,但是代码不完整,并且只有java部分的编程,我在它 ...