Vue指令v-show和v-if的区别

最新推荐文章于 2024-07-22 08:55:10 发布

斗帝萧炎

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量200

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53716634/article/details/126943542

版权

1.v-show

1.v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的。

2.v-show是通过设置DOM元素的display样式属性控制显隐。

3.v-show有更高的初始渲染消耗

4.数据改变之后呢对应的元素的显示状态也是会同步更新的

v-show使用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-show="display">我是由v-show控制的</div>
      <div v-if="display">我是由v-if控制的</div>
    </div>

<script src="../Vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        display:true
        }
})
</script>

</body>
</html>

2.v-if

1.v-if是动态的向DOM树内添加或者删除DOM元素

2.v-if有更高的切换消耗

3.v-if适合运营条件不大可能改变

v-if使用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <!--多分支-->
    <h3>看看我有多少钱，可以请客吃饭</h3>
    <div v-if="money >=1000">酒店请客</div>
    <div v-else-if="money >=500">酒楼请客</div>
    <div v-else-if="money >=100">排挡请客</div>
    <div v-else-if="money >=10">路边摊请客</div>

    <!--双分支使用v-if-->
    <div v-if="age >=18">成年了,可以枪毙了</div>
    <div else>未成年,可以坐牢了</div>
</div>
</body>
<script src="../Vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        money:80,
        age:16
       
    }
})
</script>
</html>

v-show和v-if相同点

在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。

当表达式为true的时候，都会占据页面的位置

当表达式都为false时，都不会占据页面位置

原理

v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏

v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示

V-if和V-show使用场景

v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好