v-show和v-if的区别

最新推荐文章于 2024-05-15 18:27:31 发布

almostall

最新推荐文章于 2024-05-15 18:27:31 发布

阅读量132

点赞数

分类专栏： Vue知识点

本文链接：https://blog.csdn.net/weixin_45364670/article/details/109221715

版权

Vue知识点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-show和v-if的区别

v-show和v-if都可以用于决定一个元素是否显示。先说明一下v-if的使用方法，v-if常与v-else-if，v-else使用，将这三个命令与if–else if–else联系起来就非常好理解了。以下为一个小案例展示其用法。

<body>
  <div id="app">
    <h3 v-if="score>=90">优秀</h3>
    <h3 v-else-if="score>=80">良好</h3>
    <h3 v-else-if="score>=60">合格</h3>
    <h3 v-else>不合格</h3>
   </div> 
   <script> 
    const vm = new Vue({
      el: '#app',
      data: {
        message:'hello',
        isTrue:false,
        score:89
      },
    </script>

v-show和v-if区别在于：当条件为false时，包含v-if指令的元素不会出现在dom中，当指令为true时在新建这个元素，是一个出现和消失的切换过程，而v-show则只是给其元素添加行内样式,display:none.

在实际开发中，使用较多的是v-if，没有的元素就不进行渲染了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

almostall

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-show和v-if的区别

v-show和v-if的区别v-show和v-if都可以用于决定一个元素是否显示。先说明一下v-if的使用方法，v-if常与v-else-if，v-else使用，将这三个命令与if–else if–else联系起来就非常好理解了。以下为一个小案例展示其用法。<body> <div id="app"> <h3 v-if="score>=90">优秀</h3> <h3 v-else-if="score>=80">
复制链接

扫一扫