VUE(uni-app框架)开发微信小程序③-显示隐藏

最新推荐文章于 2024-07-22 08:50:43 发布

阿诺伯格

最新推荐文章于 2024-07-22 08:50:43 发布

阅读量4.3k

点赞数 1

文章标签：微信小程序 vue.js uni-app

本文链接：https://blog.csdn.net/qq_39075676/article/details/127381912

版权

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。