当前位置：首页技术论坛 uni中使用v-show 与 v-if v-else 来控制组件的显示效果

uni中使用v-show 与 v-if v-else 来控制组件的显示效果

2024-09-04 16:59:13

复制链接

7635

v-show v-if

在页面中控制某一个组件是否是显示可以使用v-show 或者 v-if 属性来设置

v-show的使用：

// v-show &#23545;&#24212;&#19968;&#20010;&#24067;&#23572;&#20540;  &#22914;&#26524;&#26159;true &#21017;&#26174;&#31034; &#26159;false&#21017;&#38544;&#34255;<view class="box1" v-show="bool"></view>		&#20869;&#23481;&hellip;&hellip;

<br><br>data() {
	return {
		bool:false,
	}
}

v-show对组件无效：

// v-show &#23545;&#24212;&#19968;&#20010;&#24067;&#23572;&#20540;  &#22914;&#26524;&#26159;true &#21017;&#26174;&#31034; &#26159;false&#21017;&#38544;&#34255;// &#32473;&#32452;&#20214;&#35774;&#32622;&#26080;&#25928;
<com v-show="bool"></com> <br>
import com from "../new_file.vue"
data() {
	return {
		bool:true,
	}
},
components:{
     com 
}

v-if的使用

// v-if &#23545;&#24212;&#19968;&#20010;&#24067;&#23572;&#20540; &#22914;&#26524;&#26159;true &#21017;&#26174;&#31034;v-if &#26631;&#31614;&#20013;&#30340;&#20869;&#23481;  &#26159;false&#21017;&#26174;&#31034;v-else&#20013;&#30340;&#20869;&#23481;<view class="box1" v-if="bool">
	bool&#20026;true
</view>
<view v-else>
	bool&#20026;false
</view>


data() {
	return {
		bool:true,
	}
}

v-if可以对组件进行设置显示与否

<view class="box1" v-if="bool">
	
</view>
<com v-else></com><br><br>
import com from "../new_file.vue"
data() {
	return {
		bool:false,
	}
},
components:{
     com 
}

相同点

v-show 与 v-if都可以控制元素的显示与隐藏

不同点（百度找到的解释）

v-show ：会在app初始化的时候编译并且渲染，并且在之后一直存在。当切换v-show模块时，只是简单的更改css。

v-if ：当切换v-if模块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 是惰性的，如果为false，则什么也不错-不编译，不渲染。当第一次条件为真时，才开始编译。

2.优点与缺点：

v-show的切换消耗比较低，但是不会重新渲染子组件，所以最好用于静态的内容或者不需要重新构建结构的组件。而 v-if 比较适合不太频繁的切换状态的组件。所以项目设计的时候，不要对复杂的业务设计模块太频繁的视图切换。尽量将静态内容和动态内容分离到不同的模块中。

。

运营部

孙军玲1

已更新 793篇

他的主页

板块推荐

排行榜

用户协议

欢迎访问我们的网站！我们非常重视用户的隐私权和信息安全，因此制定了以下用户协议，以明确我们与您之间的关系以及您在使用本网站时应遵守的条款。请您仔细阅读并同意本协议的所有条款，以便您能够合法、安全地使用本网站。如果您不同意本协议的任何内容，请立即停止使用本网站。

服务说明：本网站是一个提供定制软件开发服务和在线找技术搭档的互联网平台。我们保留随时更改、更新或暂停本网站的权利。我们会尽力确保网站的正常运行，但对于因技术问题、系统维护或其他原因导致的网站暂时不可用，我们不承担任何责任。
用户注册：用户需要通过提供手机号、微信扫码和其他必要信息来注册一个账户。您有责任保护您的用户名和密码，不得将其透露给任何第三方。对于因您的用户名和密码被泄露而导致的任何损失或损害，我们将不承担责任。
用户行为规范：用户应遵守中华人民共和国相关法律法规，不得发布或传播违法信息、侵犯他人权益的内容。用户应对其发布的内容负责，并承担因发布不当内容而引起的任何法律责任。
版权声明：本网站所包含的所有文字、图片、音频、视频等素材的著作权均归本网站所有（会员用户上传的默认承诺为不侵权的合法自有技术成果，本网站审核信息后可展示，所有权不归本网站）。未经本网站书面许可，任何单位或个人不得以任何形式复制、转载、修改或传播本网站的任何内容。对于侵犯本网站知识产权的行为，将依法追究其法律责任。
免责声明：本网站不对因使用本网站而引起的任何直接、间接、偶然、特殊或后果性的损害承担责任。包括但不限于利润损失、数据丢失、业务中断等。
适用法律和争议解决：本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。如发生争议，双方应首先协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。
本协议的解释权归本网站所有。如有未尽事宜，本网站保留最终解释权。
本协议自用户点击“同意”或“接受”按钮时生效。

同意

隐私政策

欢迎访问我们的网站！我们致力于为您提供一个安全、可靠的在线环境。本隐私政策旨在说明我们在您使用我们的网站时如何收集、使用和保护您的个人信息。请仔细阅读以下内容，以了解我们的隐私政策。

信息收集

在使用我们的网站时，我们可能会收集以下类型的信息：

a) 个人识别信息：如姓名、电子邮件地址、电话号码等。 b) 非个人识别信息：如浏览器类型、操作系统、设备类型、IP地址等。 c) 用户行为信息：如访问页面、点击链接、搜索查询等。

信息使用

我们收集的信息将用于以下目的：

a) 提供、改进和个性化我们的服务。 b) 与您联系，回应您的询问和请求。 c) 发送您请求的或我们认为对您有帮助的信息。 d) 进行市场调研和分析，以改进我们的产品和服务。 e) 防止欺诈和其他非法活动。

信息共享

我们不会出售、出租或以其他方式与第三方共享您的个人信息，除非：

a) 获得您的明确同意。 b) 与可信赖的合作伙伴共享，以提供您请求的服务。 c) 根据法律要求或政府机关的要求。 d) 为保护我们的权利、财产或安全。

信息安全

我们采取合理的安全措施，以保护您的个人信息不受未经授权的访问、披露、更改或破坏。然而，请注意，没有任何一种电子存储方法是100%安全的。

Cookie和跟踪技术

我们的网站使用Cookie和类似的跟踪技术来收集有关您使用我们网站的信息。这些信息有助于我们分析和改进我们的网站，以及提供个性化的内容和广告。您可以通过浏览器设置拒绝接受Cookie，但这可能会影响您使用我们网站的能力。

第三方链接

我们的网站可能包含指向其他网站的链接。请注意，我们对其他网站的隐私政策和实践不承担任何责任。我们建议您在访问这些网站时查看其隐私政策。

隐私政策的变更

我们可能会不时更新本隐私政策。请定期查看此页面，以确保您了解我们对个人信息的最新政策。

联系我们

如果您对我们的隐私政策有任何疑问或建议，请通过以下联系方式与我们联系：

电子邮件：[wangye-101@163.com]

电话：+86-173-3019-6230

地址：中国石家庄市长安区吾悦广场2010室

感谢您的信任和支持！我们将竭诚为您提供更优质的服务。

同意

uni中使用v-show 与 v-if v-else 来控制组件的显示效果

2024-09-04 16:59:13

板块推荐

排行榜

热门推荐

提示

微信扫一扫快速联系

用户协议

隐私政策