vue中的条件判断（v-if与v-show）

最新推荐文章于 2025-05-06 13:52:28 发布

valentinelzt

最新推荐文章于 2025-05-06 13:52:28 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/valentinelzt/article/details/104469420

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨Vue.js中条件渲染的两种方式：v-if与v-show。通过实例代码展示了如何使用v-if和v-else-if进行元素的显示与隐藏，以及v-show在控制元素可见性时的不同之处。同时，介绍了在数据变化时，两种渲染方式对DOM操作的影响。

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

具体代码如下

<template>
  <div>
    <h1>条件判断</h1>
    <!-- isshowm  当if条件判断为false时，删除该元素 -->
    <div v-if="isShow">isshow为true才能显示</div>
    <div v-else-if="isElse">isElse为true的时候才显示</div>
    <div v-else>所有条件都不满足</div>

    <!-- v-show  value为false时  元素隐藏 并没有删除-->
    <div v-show="isShow2">通过v-show来控制条件渲染</div>
  </div>
</template>

<script>
export default {
  name: 'demo1',
  data () {
    return {
      isShow: true,
      isElse: true,
      isShow2: true
    }
  },
  mounted () {
    setTimeout(() => {
      this.isShow = false
    }, 3000)
    setTimeout(() => {
      this.isElse = false
    }, 1000)
  }
}
</script>