v-if与v-show的简单区分

最新推荐文章于 2024-05-30 14:27:51 发布

篆愁君的烦恼

最新推荐文章于 2024-05-30 14:27:51 发布

阅读量86

点赞数

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

本文链接：https://blog.csdn.net/m0_52228992/article/details/124184263

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

v-if:"booleanObject"：控制元素是否创建，或者直白点为true的话就进行创建，为false就不管它。

v-show："booleanObject"：控制元素是否显示，这个是通过控制display的值来进行控制的，不管是否显示，都会创建。

举一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div{
    /*width: 200px;*/
    height: 150px;
  }
</style>
<body>
<script src="../js/vue.js" type="text/javascript"></script>
<div id="app">
  <div v-show="noShow">false---div--v-show</div>
  <div v-show="isShow">true---div--v-show</div>
  <div v-if="noShow">false---div--v-if</div>
  <div v-if="isShow">true---div--v-if</div>
</div>
<script>
  let MyVue=new Vue({
    el:"#app",
    data:{
      isShow:true,
      noShow:false
    }
  })
</script>
</body>
</html>

运行结果：

两者对比，使用起来是没有什么比较大的差别的，但v-show适用于频繁切换显示与否的环境；v-if适用于条件情况不是必要切换的，可以节省资源的浪费。

举一个v-if适用的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js" type="text/javascript"></script>
<div id="app">
  <p>目前的分数为{{goals}}</p>
  <p>评级为</p>
  <h1 v-if="goals>=90">A</h1>
  <h1 v-else-if="goals>=80">B</h1>
  <h1 v-else-if="goals>=60">C</h1>
  <h1 v-else-if="goals>=0">D</h1>
</div>
<script>
  let MyVue=new Vue({
    el:"#app",
    data:{
      goals:80
    }
  })
</script>
</body>
</html>

结果：

这样就可以省去不必要的创建元素。

篆愁君的烦恼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
v-if与v-show的简单区分

v-if:"booleanObject"：控制元素是否创建，或者直白点为true的话就进行创建，为false就不管它。v-show："booleanObject"：控制元素是否显示，这个是通过控制display的值来进行控制的，不管是否显示，都会创建。举一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</
复制链接

扫一扫