v-show的使用以及和v-if的区别

最新推荐文章于 2024-09-19 11:29:03 发布

Eli-sun

最新推荐文章于 2024-09-19 11:29:03 发布

阅读量316

点赞数

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

本文链接：https://blog.csdn.net/vfjcgg/article/details/106625720

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

v-show的使用以及和v-if的区别

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染；
v-if和v-show的对比：
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
1.v-if当条件为false时，压根不会有对应的元素在DOM中。
2.v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
1.当需要在显示与隐藏之间切换很频繁时，使用v-show。
2.当只有一次切换时，通过使用v-if。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h2 v-show="isShow">{{message}}</h2>
</div>

<script src="../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      isShow:true,
    }
  })
</script>
</body>
</html>