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. (app笔记)Memory Fill内存填充

    Memory Fill 是实现app内存填充工具(运行内存,物理内存,网络空间内存) Used:已用内存 filled:未回收内存 Free:自由内存 1.Ram(Total Ram):手机运行内存 ...

  2. docker容器部署flask单页面应用

    本地安装docker,拉取centos镜像. docker pull centos:7 本地文件结构: /usr/local/var/tmp/docker_demo .app ---requireme ...

  3. HCIP-ICT实战进阶06-BGP基础

    HCIP-ICT实战进阶06-BGP基础 0 前言 运营商内部网络通过RIP.OSPF.ISIS实现网络互联, 但运营商之间要怎么办? 能不能互相引入路由? 理论上可行, 但考虑到网络机密问题和内部路 ...

  4. [ZZH]第一篇博客

    time: 2022/3/29  20:24 my first blog

  5. 使用vue渲染大量数据时应该怎么优化?

    Object.freeze 适合一些 big data的业务场景.尤其是做管理后台的时候,经常会有一些超大数据量的 table,或者一个含有 n 多数据的图表,这种数据量很大的东西使用起来最明显的感受 ...

  6. 小白之Python-基础中的基础03

    序列,目前看来很基础,东西比较多,难度开始加大...加油吧,骚年 Python之序列 1.数据结构:序列.容器(序列:索引.映射:键).集合2.列表.元组.字符串.Unicode字符串.buffer对 ...

  7. kafka配置内外网同时访问

    #内网监听名称,这个在配置文件中没有需要添加 inter.broker.listener.name=INTERNAL #内网监听规则,第一个是内网,第二个是外网,注意端口不一样,端口可以自己定义 li ...

  8. [canvas]ncaught TypeError: Cannot read properties of null (reading 'getContext')

    相信你和我一样是直接复制大佬的js代码(笑) ------------ 主要问题在于:js先加载完了,html才加载,导致js获取不了html的对象 解决办法: 把  <head />  ...

  9. docker 运行环境

    步骤 1 - 启用适用于 Linux 的 Windows 子系统 需要先启用"适用于 Linux 的 Windows 子系统"可选功能,然后才能在 Windows 上安装 Linu ...

  10. 关于github的自动化检测

    github 中的 Some checks were not successful什么意思呢?   在 GitHub 上,当您向存储库提交拉取请求时,如果存在自动化的检查(例如CI/CD)或在 pul ...