css:
1、display:none 控制显示方式,脱离文档流,不在DOM树上生成
2、opacity:0 设置透明度,只是在视觉上是隐藏的,元素仍存在于DOM树上
3、heigh:0;width:0 宽高设置为0,不占据空间,但如果有子元素会撑开父级,想要都隐藏 时需要设置overflow:hidden
vue:
1、v-if:条件为false时,元素不显示,不在DOM树上生成
2、v-show:条件为false时,元素不显示,但存在于DOM树上
区别:v-if是动态向DOM树上添加或删除元素,v-show是设置元素的display样式控制显隐;v-if有更高的切换消耗,v-show有更高的初始加载消耗;v-if适用于条件不总改变的情况,v-show适用于频繁切换显隐的情况。
js:通过方法设置css样式来控制