Vue中内置指令v-if和v-show的区别

最新推荐文章于 2024-07-19 10:16:01 发布

Code--Maker

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/gdxjznfw/article/details/108719896

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在学习vue框架基础的时候,大家可能对v-if和v-show这两个内置指令比较模糊,分不清楚这两个内置指令的用法,今天来区分一下这两个内置指令

v- 内置指令我们实际上是用来操作元素的attributes

v-if和v-show,两个指令实现的效果是一样的,作用都是用来控制元素的显示和隐藏的
v-if 是实打实的dom操作在dom树中加进去或者删除掉
v-if 运行时性能较差 (把flag 从false改为true )
由于运行时更改状态通过v-if 需要把元素依次加到dom中所以v-if运行时性能较差
v-show 是用css样式display属性来控制显示和隐藏
由于初次渲染的时候要保证可以通过css控制样式所以通过v-show控制的元素需要都渲染到dom树中而通过v-if控制的元素不需要加进来
代码如下 :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-if与v-show的区别</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>  
  <div id="app">
    <div v-show="flag1">show</div>
    <div v-show="flag1">show</div>
    <div v-show="flag1">show</div>
    <div v-show="flag1">show</div>
    <div v-show="flag1">show</div>

    <div v-if="flag2">if</div>
    <div v-if="flag2">if</div>
    <div v-if="flag2">if</div>
    <div v-if="flag2">if</div>
    <div v-if="flag2">if</div>

  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        flag1: false,
        flag2: false,      
      }
    })
  </script>

在浏览器中结构显示如下 :
在这里插入图片描述
根据结果可以直观的看出 : 指令状态都为false时,都不显示,v-show是通过样式控制元素显示隐藏的,而v-if是通过DOM元素的操作来控制的
v-show 初始渲染性能较差
v-if 运行时性能较差
如果元素切换显示和隐藏频率高就用v-show 反之用v-if