代码:
<!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 较好。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对移动技术网的支持。如果你想了解更多相关内容请查看下面相关链接
如对本文有疑问, 点击进行留言回复!!
antd of vue 利用customRequest自定义渲染上传进度条
VUE怎么解决路由跳转时及跳转到外部链接,再返回的页面缓存问题
vue 调用后端接口导出excel无效果,直接访问后端url可以
网友评论