uni-app控制显示隐藏的方式有两种,【v-if】 和   【v-show】

v-if:通过控制虚拟dom树的节点来达到控制式样的显示和隐藏,当参数为false的时候,该节点被删掉,当为true的时候则显示。

v-show:通过css样式中的dispaly:none来控制元素的显示和隐藏

代码如下:

<template>
	<view class="content">
		<view v-if="false">v-if隐藏</view>
		<view v-if="true">v-if显示</view>
		<view>------------------------------------</view>
		<view v-show="false">v-show隐藏</view>
		<view v-show="true">v-show显示</view>
	</view>
</template>

显示效果如下:

 通过右边Wxml的代码,我们发现v-if隐藏已经不见了,只有v-if显示,可是v-show隐藏和v-show显示都在,可是左边的显示都达到了我们预期的效果,所以,v-if是通过虚拟dom直接删除的节点,而v-show则是全部加载之后通过css实现隐藏显示的,所以在有大量的切换显示的时候建议使用v-show。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐