条件渲染 之 v-if 和 v-show 的区别

vue动态显示DOM元素常用 v-if 和 v-show 这两种方式,但这两种是有区别的:

  • v-if:当条件为false时,包含v-if指令的元素,根本就不会存在与dom中
  • v-show:当条件为false时,v-show只是给元素添加一个行内样 display:none
区别 v-if v-show
实现方式 动态地向DOM树内添加或者删除DOM元素 设置DOM元素的display样式属性来控制显隐(display="none")
编译过程 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) 控制css进行切换
编译条件 初始值为false就不编译;只有在第一次条件变为真时才开始局部编译 在任何条件下(首次条件是否为真)都被编译
性能消耗 不停的销毁和创建(v-if 的初始化较快,但切换代价高) 只编译一次,保留DOM元素,之后通过控制css来控制显隐 (v-show 初始化慢,但切换成本低,性能更好)
使用场景 适合仅切换一次或不频繁切换的场景(应用更广) 适合频繁切换的场景(不常用)

eg1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <!-- 当条件为false时,包含v-if指令的元素,根本就不会存在与dom中 -->
        <h2 v-if="isShow" id="aaa">{{message}}</h2>
        <!-- 当条件为false时,v-show只是给元素添加一个行内样式 display:none -->
        <h2 v-show="isShow" id="bbb">{{message}}</h2>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message :'liy',
            isShow :true
        }  
    });
</script>
</html>

eg2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <span>v-if和v-show都能实现元素的隐藏和显示,但v-if是将元素添加到dom或从dom移除,而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示</span>
        </div>
        
        <button v-on:click="showOrHidden">显示隐藏切换</button>
        <div v-if="isShow">我有一头小毛驴</div>
        <div v-show="isShow">我又有一头小毛驴</div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            showOrHidden:function(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>
</html>

拓展:display:none 和 visible:hidden 都能把网页上某个元素隐藏起来。两者区别为:

  • display:none ---使该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
  • visible:hidden--- 使对象在网页上不可见,即在网页中不占任何的位置。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容