前言
在 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>