Vue学习之路第十五篇：v-if和v-show指令
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指令的更多相关文章
- vue学习指南：第十五篇(详细) - Vuex
Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 ...
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Vue学习之路第十八篇：私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- FastAPI 学习之路（十五）响应状态码
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
随机推荐
- NYOJ 一笔画问题 欧拉路
一笔画问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...
- 怎样手动的干净的删除linux上的ORACLE数据库
近期在用VMWARE虚拟机做ORACLE的数据库实验.我们都知道在WINDOWS上,我能够到加入删除程序里去自己主动删除已经安装的全部的应用程序.可是在LINUX上没有这个服务能够进行自己主动的删除. ...
- hdu4762Cut the Cake（概率+大数操作（java）+C++高精度模板）
题目链接:点击打开链接 题目描写叙述:现有一个大蛋糕.上面随机分布了n个草莓,然后将草莓切成m块,问n个草莓全在一块蛋糕上面的概率? 解题思路:细致分析可得:C(n,1)/m^(n-1) 因为m< ...
- 2.【SELinux学习笔记】概念
1.强制类型的安全上下文 在SELinux中,訪问控制属性叫做安全上上下文.不管主体还是客体都有与之关联的安全上下文.通常安全上下文是由三部分组成:用户:角色:类型. 如: $id -Z j ...
- vbs脚本
巧用Vbs SendKeys 可以做的事 发布: 2014-04-06 10:00:20 | 作者: | 来源: 按键精灵资源站 巧妙使用VBS中的SendKeys命令(这个命令的作用就是模拟键盘操作 ...
- Linux学习(二) wget命令的使用
近期在Linux下进行一些操作,在非常多地方都用到了wget这个命令,记录一下一些有关wget的使用方法: wget是在Linux下开发的开放源码的软件,作者是Hrvoje Niksic,后来被移植到 ...
- 《Head First 设计模式》学习笔记——复合模式
模型-视图-控制器(MVC模式)是一种很经典的软件架构模式.在UI框架和UI设计思路中扮演着很重要的角色.从设计模式的角度来看,MVC模式是一种复合模式.它将多个设计模式在一种解决方式中结合起来,用来 ...
- Python+unittest 接口自动化测试
1.封装get.post#!/usr/bin/env python3# -*- coding: utf-8 -*- __author__ = 'hualai yu' import requests c ...
- 运维自动化-Ansible
前言 天天说运维,究竟是干什么的?先看看工作流程呗.一般来说,运维工程师在一家企业里属于个位数的岗位,甚至只有一个.面对生产中NNN台服务器,NN个人员,工作量也是非常大的.所以嘛,图中的我好歹也会配 ...
- 使用Android ADT最新开发工具后，新建项目出现appcompat v7 他是什么？
做Android开发的朋友最近会发现,更新ADT至22.6.0版本之后,创建新的安装项目,会出现appcompat_v7的内容.并且是创建一个新的内容就会出现.这到底是怎么回事呢?原来appcompa ...