• 技术文章 >web前端 >Vue.js

    vuejs中v-show和v-if的区别是什么

    青灯夜游青灯夜游2021-09-28 12:02:34原创262

    区别:1、“v-if”是动态的向DOM树内添加或者删除DOM元素,“v-show”是通过设置DOM元素的display样式属性控制显隐;2、编译过程不同;3、编译条件不同;4、“v-if”的切换消耗高,“v-show”的初始渲染消耗高等等。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    v-if与v-show的区别

    v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏,v-ifv-show属于Vue的内部常用的指令,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

    描述

    v-if

    v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染。

    <div v-if="show">show</div>
    <div v-else>hide</div>

    v-show

    v-show指令用法大致一样,不同的是带有v-show指令的元素始终会被渲染并保留在DOM中,v-show只是简单地切换元素的CSS property display

    <div v-show="show">show</div>

    区别

    相关推荐:《vue.js教程

    以上就是vuejs中v-show和v-if的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vuejs v-show v-if
    上一篇:vuejs-paginate怎么用 下一篇:vuejs实现双向绑定的原理是什么
    大前端线上培训班

    相关文章推荐

    • 写vuejs用什么ide工具• vuejs怎么创建并调用全局方法• 前端vuejs是什么语言• vuejs中有什么事件• vuejs-paginate怎么用• jquery和vuejs有什么区别

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网