关于 v-if v-show的区别

最新推荐文章于 2022-08-29 11:39:45 发布

故事只若初见

最新推荐文章于 2022-08-29 11:39:45 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/qq_45424679/article/details/112209850

版权

本文探讨了Vue.js中v-if和v-show指令的区别。v-if执行条件化的真实DOM渲染，适合不频繁切换的情况，因为它涉及到组件的销毁和重建。相反，v-show在初次渲染时就有较高开销，但在条件切换时切换成本较低，适用于频繁切换的场景。v-else作为v-if或v-show的补充，提供else分支的功能。示例代码展示了v-if和v-else在实际应用中的用法。

摘要由CSDN通过智能技术生成

v-if 指令可以完全根据表达式的值在DOM中生成或者移除一个元素。如果v-if 表达式 赋值为false ,那么对应的元素 就会从 DOM中移除 ；否则 ，对应元素的一个克隆将被重新插入 DOM中。
<body class ="native">
  <div id ="examplate">
     <p v-if ="greeting>杨梦伟</p>       
</div>
</body>
<script>
        var exampleVM2 =new Vue({
                el :"#examplate",
                data:{
                    greeting:false
                }
})

</script>
y因为v-if 是一个指令, 需要将它添加 到一个元素上， 但是 如果想切换多个元素 ，则可把<template>元素当做包装元素,并在使用v-if，最终的渲染结果不会包含它。
<tempalte v-if ="ok">
 <h1>title</h1>
<p>归属感</p>
<p>爱过后</P>
</template>
v-show
v-show 指令是根据元素的值来显示隐藏 HTML元素 ，当v-show赋值为 false时,元素 将隐藏，查看dom时,会发现元素上多了一个内联样式style ="display:none".
<body>
    <input type ="text" v-model ="message" placeholder ="edit me" />
    <di