vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。

v-if

　　v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果；

　   所以v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗；

　　而且v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块

　　

v-show

　　v-show则是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏；

　　它拥有比较高的初始渲染消耗；

使用场景

　　如果元素需要进行比较频繁的切换的话，推荐使用v-show，

　　如果很少用到切换，或者元素可能永远都不会显示出来的话，就使用v-if

注意：如果已经在css中明确写出display : none 的话，在v-if中就算设置v-if为true也是不能让元素显示的，因为他没办法覆盖或者修改掉css里面的

　　　　display : none属性，他只是会修改element style为display:""或者display:none

vue中v-if与v-show区别的更多相关文章

  1. vue中extend/component/mixins/extends的区别

    vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸

  2. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  3. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  4. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  5. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  6. Vue 中 export及export default的区别

    相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...

  7. vue中的v-if和v-show的区别

    v-if和v-show的区别是前端面试中常问的基础知识点,v-if.v-show顾名思义就是用来判断视图层展示效果的.那么具体是怎么展示呢?v-if和v-show的区别又是什么呢? 首先我们可以来看一 ...

  8. vue中mode hash 和 history的区别

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

  9. Vue中 onmouseenter,onmouseleave,onmouseover,onmouseout的区别

    今天在学Vue视频的时候,提到了这四个触发事件,我就想做下笔记: 1.onmouseenter和onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发 ...

  10. vue中的$route和$router的区别

    1. $route是一个对象 可以获取当前页面的路由的路径query.params.meta等参数: 2.$router是VueRouter的一个实例对象 在options中可以获取路由的routes ...

随机推荐

  1. c# 调用User32.dll

    获取当前窗口句柄:GetForegroundWindow()[DllImport("user32.dll", CharSet = CharSet.Auto, ExactSpelli ...

  2. git commit提交代码时跳过 eslint校验

    在使用命令 git commit -m '提交信息' 将本地代码提交到远程仓库时候, 如果项目安装了 per-commit,则会在Git键入提交信息前进行代码风格检查,如果代码不符合相应规则,则报错. ...

  3. spider_爬取斗图啦所有表情包（图片保存）

    """爬取斗图吧里面的所有表情包知识点总结: 一.使用requests库进行爬取,随机请求头(网站反爬措施少.挂个请求头足矣) 二.具体思路: 1.先爬取所有的图片url ...

  4. Java中静态方法和实例方法

    static修饰的方法可以直接用方法名.    访问 实例成员方法必须永实例成员调用

  5. pyspark 结构化数据开发实例

    什么是SPARK? 1. 先进的大数据分布式编程和计算框架 2. 替换Hadoop 中的MR计算引擎. 3. 内存分布式计算:运行数度快 4. 可以使用不同的语言编程(java,scala,r 和py ...

  6. uni-app学习笔记之----传参、通讯

    1.页面传参 父级页面传递参数到详情页: 详情页得到参数: 打印: 2.组件通信 (1)子组件---->父组件:$emit() (2)父组件---->子组件:props (3)兄弟组件: ...

  7. 22_webpack_优化

    Terser是一个JS的解析(Parser).Mangleer(绞肉机).Compresor(压缩机)的工具 绞肉机如:一个函数 function functionsWithLongNames(){ ...

  8. 牛客算法进阶——树形dp

    1. 小G有一个大树(求树的重心) 删除该点后最大连通块的节点数最小 设f[x]表示以x为根的子树大小,那么删除x之后的各子树大小为f[to]和n-f[x] 求max(max(f[to]),n-f[x ...

  9. BigQuery 如何帮助大规模交付业务型企业提供物联网解决方案

    [本文由 Cloud Ace 整理发布,Cloud Ace--谷歌云全球战略合作伙伴] (介绍:Leverege是一家软件公司,它使全球市场领导者能够快速且经济高效地构建企业物联网应用程序,以提供以数 ...

  10. PyCharm的安装使用

    一.安装 1.进入官网点击下载 2.打开文件夹 3.点击next 4.选择安装路径 5.勾选创建桌面图标选项,点击next 6.点击安装 二.使用 1.import pycharm setting是指 ...