精华内容
下载资源
问答
  • v-if和v-show的区别
    万次阅读 多人点赞
    2019-07-31 19:19:50

    一、v-if 和 v-show 的区别

    1. 手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐
    2. 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换
    3. 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留
    4. 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗
    5. 使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换
    6. 相同点 v-show 都可以动态控制着dom元素的显示隐藏
    7. 不同点:v-if 的显示隐藏是将DOM元素整个添加或删除,v-show 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的
    8. 在渲染多个元素的时候,可以把一个 元素作为包装元素,并使用v-if 进行条件判断,最终的渲染不会包含这个元素,v-show是不支持 语法
    更多相关内容
  • v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点
  • 1. v-show 不管初始的条件是什么,元素总是会被渲染,并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。 2. v-if 会根据初始的条件(data里自己的定义的数据)来进行真正的渲染(组件真正...
  • 本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-...
  • 代码: <!DOCTYPE html> <... <head>... <div v-if=isIf>v-if <div v-show=ifShow>v-show <button @click=toggleShow()>点击按钮</button> </body> [removed]</scrip
  • Vue中v-if和v-show区别与用法解析

    千次阅读 2020-02-13 18:41:51
    一、v-if和v-show的异同点 1.相同点 :v-if和v-show都可以动态控制DOM元素的显示隐藏。 2.不同点:v-if是动态地向DOM树中添加或删除DOM元素节点;v-show是通过向DOM元素设置样式display属性值控制显示隐藏。 我们...

    一、v-if和v-show的异同点
    1.相同点 :v-if和v-show都可以动态控制DOM元素的显示隐藏。
    2.不同点:v-if是动态地向DOM树中添加或删除DOM元素节点;v-show是通过向DOM元素设置样式display属性值控制显示隐藏。
    我们通过一个简单的demo对比观察下:

    <body>
        <div id="app">
            <div v-if="isIf"><p>我被v-if控制</p></div>
            <div v-show="isShow"><p>我被v-show控制</p></div>
            <button @click="pChange">Change</button>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                isIf:true,
                isShow:true
            },
            methods:{
                pChange(){
                    this.isIf=(this.isIf===true?false:true);
                    this.isShow=(this.isShow===true?false:true);
                }
            }
        })
    </script>
    

    在这里插入图片描述
    这个demo用一个button按钮执行函数控制v-if和v-show的值(true/false切换),在控制台不难看出,当两个指令值都为false时,v-if控制的元素是直接从DOM树销毁的;而v-show控制的元素还在DOM树中,只是以display:none样式隐藏元素内容。

    二、v-if和v-show特性总结
    1.编译方面:按控制手段和官方文献可知,v-if是惰性的,若最初指令值为false,它是不会编译的,直至指令值为true才开始局部编译存入缓存;v-show不管最初指令值为真假都会马上编译存入缓存,保留DOM。
    2.消耗方面:v-if切换性能消耗较大;v-show最初渲染消耗较大。
    3.适用场景:v-if适用切换条件、项目需求稳定;v-show适用频繁需要切换。
    4.语法方面:v-if可与v-else、v-else-if配合使用进行判断执行,但一定需要相邻,不可中断;v-show无特殊语法。

    展开全文
  • Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
  • 1.v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器子组件适当地被销毁重建。 2.v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染...
  • 主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器子组件适当地被销毁重建。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件...
  • v-if 和v-show区别

    2022-06-10 20:11:37
    v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染,为true是渲染(dom存在),为false时不存在(dom不存在) 1、v-if有更高的切换开销,v-show有更高的初始渲染开销。 如果需要频繁...

    v-show 是通过控制display属性来进行dom的显示与隐藏

    v-if 是真正意义上的条件渲染,为true是渲染(dom存在),为false时不存在(dom不存在)

     

     

    性能区别:

    1、v-if有更高的切换开销,v-show有更高的初始渲染开销。
                如果需要频繁的切换,使用v-show比较好,如果运行条件很少改变,使用v-if比较好。
             
    2、v-show比v-if性能更高,因为v-show只能动态的改变样式,不需要增删DOM元素。
                所以当程序不是很大时候,v-if和v-show区别都不大,如果项目很大,推荐多用v-show,较少浏览器后期操作的性能。
             
    3、需要多种条件场景,比如id=1,=2,=3.....时候,因为只有v-if,可以和v-else等连用,这种比较适合用v-if
             
    4、v-show不支持<template>语法
             
    5、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等,v-show只会初始化渲染时候执行,再切换时候不会执行生命后期的过程。
            

    展开全文
  • v-if和v-show区别

    千次阅读 2022-03-20 20:07:51
    一、概念 v-ifv-if 指令用于条件性地渲染...而“v-if”不停地销毁创建 (2)“v-if”更适合于带有权限的操作,渲染时判断权限数据 (3)v-show更适合于日常使用,可以减少数据的渲染,减少不必要的操作 2、本质区别

    一、概念
    v-if:v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
    v-show:v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

    二、区别
    1、主要区别

    (1)“v-show”只编译一次;而“v-if”不停地销毁和创建
    (2)“v-if”更适合于带有权限的操作,渲染时判断权限数据
    (3)v-show更适合于日常使用,可以减少数据的渲染,减少不必要的操作

    2、本质区别

    (1)vue-show本质就是标签display设置为none,控制隐藏
    (2)vue-if是动态的向DOM树内添加或者删除DOM元素

    3、编译区别

    v-show其实就是在控制css;v-show都会编译,初始值为false,只是将display设为none,但它也编译了。
    v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-if初始值为false,就不会编译了。

    4、性能

    v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。

    5、用法

    v-if更适合于带有权限的操作,渲染时判断权限数据,有则展示该功能,没有则删除。v-show更适合于日常使用,可以减少数据的渲染,减少不必要的操作。

    三、适用场景
    从页面显示上看,二者并没有太多的区别,基本上就是显示和不显示的用户体验差别。 在需要频繁切换显示状态的组件或者相对渲染强度大但是过分依赖生命周期或的组件,更加适合用 v-show 作为切换的指令。 因为,v-if 会带来实时渲染所带来的不必要的资源消耗,和操作延迟,这给用户的体验并不是很好,相对下,v-show基于CSS的显示与隐藏,更加快捷,响应速度更快,并且资源消耗也会更小。 但 v-show 的弱点也很明显,因为页面是在页面初始化的时候,就得完成全部的渲染,这使得页面的加载会更消耗资源,也意味着页面加载时长会相应增长。假如组件对资源的消耗,已经影响到了用户的体验,可能采取 v-if 将组件分成小块,按需加载或许会更加有用户体验。

    总而言之,v-if 是在表达式返回值切换时,才渲染和摧毁组件及其子组件,他会触发组件的生命周期。而 v-show 是在页面初始化时就进行了完整的渲染,这会在某些情况下,明显增加页面的加载时间。具体的使用,还得根据需求、页面的加载时长以及组件的渲染强度,进行合适的选择。

    展开全文
  • vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩,这篇文章给大家详细介绍了vue实现弹框遮罩点击其他区域弹框关闭及v-ifv-show区别介绍,感兴趣的朋友一起看看吧
  • 主要介绍了vue的注意规范之v-ifv-for 一起使用方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue指令v-show和v-if区别

    万次阅读 多人点赞 2020-11-27 10:49:23
    v-if和v-show是在前端开发中是比较常用的Vue指令,经常用来判断渲染部分代码块
  • 主要介绍了vue中的v-if和v-show区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue内置指令:v-if和v-show区别

    千次阅读 2022-03-20 17:43:03
    v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。         v-showv-show 的元素始终会被渲染并保留在 DOM 中。v-show...
  • v-ifv-show区别

    2022-07-04 21:41:11
    v-ifv-show区别
  • vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,下面小编给大家带来了实例代码,需要的朋友参考下吧
  • Vue中v-if和v-show区别

    2022-05-06 18:40:43
    v-if直接控制的是vue生成的虚拟dom树,当虚拟dom树上的节点被删除时,vue的响应系统会实时的删除对应的真实dom树上的节点;从而控制元素的显隐。 使用场景: v-show:此元素进入页面后,会频繁的改变显示状态,比如...
  • Vue的v-if和v-show区别(含图示)

    千次阅读 2021-11-16 09:19:43
    一、v-if和v-show区别v-show严格意义来说其实是条件隐藏,直接在页面初始化的时候将DOM(对象模型)元素也初始化,因为它就是将它所在的元素添加一个display属性为none,如果条件符合就显示。 ② v-if严格意义来...
  • v-if和v-show这两个指令都可以用来控制元素的可见/不可见。 它们的区别体现在三个方面 原理 2. 性能 3. 场景 从原理来看 v-if的原理是动态创建销毁;因为它会确保在切换过程中条件块内的事件监听器子组件适当...
  • v-show和v-if区别

    2022-06-12 10:51:52
    一、v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 v-showv-show 的元素始终会被渲染并保留在 DOM 中。...1、v-if有更高的切换开销,v-show有更...
  • 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue...
  • v-if v-show 都是控制元素的显示与隐藏, 区别v-if 控制元素的显示隐藏的时候会动态创建或者销毁dom,相当于“物理控制”显示与隐藏。v-else 必须搭配 v-if 使用。还有 v-else-if 语法,它 v-if 相同,判断...
  • vuejs中v-show和v-if区别是什么 区别:1、“v-if”是动态的向DOM树内添加或者删除DOM元素,“v-show”是通过设置DOM元素的display样式属性控制显隐;2、编译过程不同;3、编译条件不同;4、“v-if”的切换消耗高...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 390,249
精华内容 156,099
关键字:

v-if和v-show的区别

友情链接: kerformmeddleware.rar