欢迎光临
我们一直在努力

关于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>


赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址