关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题
2021/12/4 17:18:27
本文主要是介绍关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
在 Vue 和 uni-app 的使用过程中,我们常使用到 v-show 与 v-if 。但很多人在用时并不知道两者到底有什么区别,下面就由我来介绍下吧
一、v-show
v-show 是一个根据条件展示元素选项的指令 :
<view v-show="true">Hello!</view>
v-show 不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到 DOM 中。之后切换的时候,通过简单地切换元素的 CSS 属性的 display 来显示或隐藏元素。可以说只是改变 css 的样式,几乎不会影响什么性能。
二、v-if
v-if 指令用于条件性地渲染一块内容:
<view v-if="true">Hello!</view>
在首次渲染的时候,如果条件为假,便不会渲染到 DOM中,且页面当中也不会有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。
三、两者区别
- v-if:的false隐藏,默认是把所在的view给删除,有更高的切换开销
- v-show:则是直接更改样式,display: block / none,有更高的初始渲染开销
所以对于频繁进行切换状态,选择 v-show 性能更好;运行条件很少改变,选择 v-if 性能更好。
关于在uni-app小程序中v-show指令失效问题有两种解决方法:
代码如下(示例):
<!-- 1.用 v-if 来代替此功能 --> <view v-if="true">Hello!</view> <!-- 2.通过 :style 的方式也能达到一样的效果 --> <view :style="!show ? '' : 'display:none;'">Hello!</view>
这篇关于关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介