博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
v-show和v-if的区别
阅读量:2052 次
发布时间:2019-04-28

本文共 480 字,大约阅读时间需要 1 分钟。

相同点

都可以控制dom元素的显示隐藏

不同点

1,v-if:控制dom元素的显示隐藏是将整体的元素添加或者删除

2,v-show:控制dom元素的显示隐藏是将css样式display,设置none或者是block,DOM元素是还存在的

所以一个dom元素是存在的一个是不存在的

实现本质方法区别

vue-show本质就是标签display设置为none,控制隐藏

vue-if是动态的向DOM树内添加或者删除DOM元素


性能对比

v-if有更高的切换消耗;

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

使用场景

v-if:

在请求后台接口,用接口返回数据渲染生成多个元素的时候,由于网速太慢,导致数据刚开始没有值,此时我们页面也会进行渲染空数据就会报错。
我们可以把一个元素作为包装元素,并使用v-if 进行条件判断,如果有值,才会显示内部元素。最终的渲染不会包含这个元素,v-show是不支持这么做的。

v-show:

适用于频繁切换;例如选项卡,题诗的弹出框

转载地址:http://pkylf.baihongyu.com/

你可能感兴趣的文章
Leetcode C++《热题 Hot 100-19》543.二叉树的直径
查看>>
Leetcode C++《热题 Hot 100-21》581.最短无序连续子数组
查看>>
Leetcode C++《热题 Hot 100-22》2.两数相加
查看>>
Leetcode C++《热题 Hot 100-23》3.无重复字符的最长子串
查看>>
Leetcode C++《热题 Hot 100-24》5.最长回文子串
查看>>
Leetcode C++《热题 Hot 100-26》15.三数之和
查看>>
Leetcode C++《热题 Hot 100-27》17.电话号码的字母组合
查看>>
Leetcode C++《热题 Hot 100-28》19.删除链表的倒数第N个节点
查看>>
Leetcode C++《热题 Hot 100-29》22.括号生成
查看>>
Leetcode C++《热题 Hot 100-30》31.下一个排列
查看>>
Leetcode C++《热题 Hot 100-40》64.最小路径和
查看>>
Leetcode C++《热题 Hot 100-41》75.颜色分类
查看>>
Leetcode C++《热题 Hot 100-42》78.子集
查看>>
Leetcode C++《热题 Hot 100-43》94.二叉树的中序遍历
查看>>
Leetcode C++ 《第175场周赛-1 》5332.检查整数及其两倍数是否存在
查看>>
Leetcode C++ 《第175场周赛-2 》5333.制造字母异位词的最小步骤数
查看>>
Leetcode C++ 《第175场周赛-3》1348. 推文计数
查看>>
Leetcode C++《热题 Hot 100-44》102.二叉树的层次遍历
查看>>
Leetcode C++《热题 Hot 100-45》338.比特位计数
查看>>
读书摘要系列之《kubernetes权威指南·第四版》第一章:kubernetes入门
查看>>