vue学习笔记之v-if和v-show的区别
2017-09-20 09:29
901 查看
v-if vs v-show
v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做――直到条件第一次变为真时,才会开始渲染条件块。
相比之下, v-show 就简单得多――不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
<template> <div id="app"> <div v-if="isIf"> if </div> <div v-show="ifShow"> show </div> <button @click="toggleShow">toggle</button> </div> </template> <script> export default { name: 'app', data() { return { isIf : true, ifShow : true, loginType : "username" } }, methods: { toggleShow : function(){ this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } } </script>
看chrom控制台能更明显的看出来
对比可以看出v-if直接从代码中删除了,v-show只是通过display来切换状态,因此建议频繁切换的话用v-show比较好
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue学习笔记二:v-if和v-show的区别
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用
- vue中v-show与v-if的区别
- vue中 v-if和v-show的区别
- Vue.js 中 v-if 和 v-show 有什么区别?
- 并发编程学习笔记 三------- 关于在if中和while中使用wait(),唤醒之后的区别
- vue基础学习之v-show v-if
- Vue.js 中 v-if 和 v-show 有什么区别?(转)
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- vue中v-if和v-show的区别
- vue中v-if和v-show区别
- vue中v-if和v-show的区别
- 在vue中,v-if和v-show的区别
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- vue学习笔记之vue1.0和vue2.0的区别介绍
- Vue.js 中 v-if 和 v-show 的区别
- Swift学习笔记(一):guard 和 if 的用法及区别
- Vue.js 中 v-if 和 v-show 的区别
- vue中v-if 与v-show的区别
- vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍