关于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指令失效问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程