v-show与v-if区别_v-if底层-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52006046/article/details/128124242

本文详细介绍了Vue.js中的条件渲染指令v-if和v-show，包括它们的语法、作用及性能差异。v-if基于DOM的增删实现条件渲染，适合于初始渲染成本高且不频繁切换的情况；v-show则是通过改变CSS的display属性实现隐藏显示，适合频繁切换的场景。理解两者的区别有助于在实际开发中做出更优的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if

<body>
    <!-- HTML结构 -->
    <div id="app">
      <!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  -->
      <input type="text" placeholder="请输入考试分数" v-model.number.lazy="score" />
      <h2>你的考试分数为：{{ score }}</h2>
      <p v-if="score>=90">您的成绩为:A</p>
      <p v-else-if="score>=80">您的成绩为:B</p>
      <p v-else-if="score>=60">您的成绩为:C</p>
      <p v-else>谢谢参与,考试不及格</p>
      <hr />
    </div>
    <!-- 
        1.学习目标： v-if指令   
        2.学习路线：
            (1)作用： 根据条件渲染数据(构建页面)
            (2)语法： 
                单分支： v-if="条件"    
                双分支： v-else    
                多分支:  v-else-if="条件"    
            (3)注意点
                v-else前面要有v-if或v-else-if
                注意:如果v-i指令没有写指令值，则默认值是true
               
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: '#app',
        //data: 要渲染的数据
        data: {
          score: 0,
        },
      })
    </script>
  </body>

v-show

<body>
    <!-- HTML结构 -->
    <div id="app">
      <button @click="flag= !flag">点我修改flag</button>


      <p v-if="flag">我是v-if指令渲染的元素</p>
      <p v-show="flag">我是v-show指令渲染的元素</p>
    </div>
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: '#app',
        //data: 要渲染的数据
        data: {
          flag: false,
        },
      })
    </script>
  </body>

v-show与v-if区别

(1)作用：修改元素的样式属性 display

(2)语法： v-show="条件"

条件成立true : display属性为block

条件不成立false : display属性为none

(3)面试题:v-show与v-if区别

虽然都有相似的效果,能够实现根据条件来构建页面.

v-if : 底层是:元素的dom新增与移除. append child和remove

频繁切换： v-if性能低 ,在频繁切换会大量的创建和删除元素, 消耗性能

初始渲染: v-if性能高（因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建到dom树上, 这样就可以节省一些初始渲染开销。）

v-show : 本质是修改元素的css样式display.显示与隐藏

频繁切换: v-show性能高

初始渲染： v-show性能低(百分百会渲染,只是css属性变化)

虽然都有相似的效果,能够实现根据条件来构建页面.但底层原理是不一样的. 原理: v-if本质其实是动态地进行元素的dom新增与移除,根据条件来append child和remove. v-show本质是在动态控制元素的 display样式,根据条件来设置display样式为block和none; 作用和原因:一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。v-if,比如:选择是手机号登录还是账号密码登录; v-show,鼠标移入,显示二维码.