实例讲解v-if和v-show的区别
程序员文章站
2022-08-28 10:40:27
代码:
代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div id="app"> <div v-if="isif">v-if</div> <div v-show="ifshow">v-show</div> <button @click="toggleshow()">点击按钮</button> </div> </body> <script src="vuedist/vue.min.js"></script> <script> new vue({ el:"#app", data:{ isif : true, ifshow : true, }, methods:{ toggleshow:function () { this.ifshow = this.ifshow ? false : true; this.isif = this.isif ? false : true; } } }) </script> </html>
没点击前的图
点击后的图
显示来看v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;而v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 css 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
上一篇: PHP+Ajax简单get验证操作示例
下一篇: 实例介绍PHP删除数组中的重复元素
推荐阅读
-
对tensorflow 的模型保存和调用实例讲解
-
OpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解
-
Oracle触发器的作用、应用场景、语法和实例讲解
-
C#中Property和Attribute的区别实例详解
-
Android MotionEvent中getX()和getRawX()的区别实例详解
-
SQLSERVER全文目录全文索引的使用方法和区别讲解
-
Session的工作机制详解和安全性问题(PHP实例讲解)
-
JavaScript中toLocaleString()和toString()的区别实例分析
-
js中apply()和call()的区别与用法实例分析
-
Shell中exit和return的区别讲解