vue---vue指令之v-if和v-show

:文章是供自己平时学习时用,相当于学习笔记,如有错误,欢迎指正,若有侵权,请联系我~~

vue指令—v-if和v-show

一、v-show
表示动态显示或隐藏节点,该指令用来动态控制DOM元素的显示或隐藏。语法如下:

v-show="判断变量"

若判断变量为true,表示显示DOM节点,
若判断变量为false,表示隐藏DOM节点
二、v-if
表示动态创建和删除节点,该指令和v-show的用法相同。

v-if="判断变量"

若判断变量为true,表示创建DOM节点,
若判断变量为false,表示删除DOM节点
三、示例
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令之v-if和v-show</title>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script> 
</head>
<body>
    <div id="box">
        <button @click="handleClick">click</button>
        <div v-if="isCreate">动态创建和删除节点</div>
        <div v-show = "isShow">动态显示和隐藏节点</div>
    </div>
    <script type="text/javascript">
        //构建vue实例
        var vm = new Vue({
       
            el: "#box",
            data:{
     
                isCreate: true,  //布尔型
                isShow: true
            },
            methods:{
        //方法
                handleClick(){
     
                    this.isCreate = !this.isCreate  //取反操作,每次点击按钮,都会进行取反操作
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>

运行效果:
vue---vue指令之v-if和v-show_第1张图片
分析:
当点击按钮时,触发handleClick事件,isCreate和isShow的值均变为false,此时,两个节点都消失不见了,如下图:
vue---vue指令之v-if和v-show_第2张图片
这是为什么呢?因为当第一个节点的判断变量isCreate的值变为false时,该节点进行了删除操作,而第二个节点的判断变量isShow的值变为false时,该节点进行了隐藏。如下图,我们到控制台查看,发现第一个节点被删除了,而第二个节点则是被自动添加了display:none的样式,该dom元素依然存在。如图:
vue---vue指令之v-if和v-show_第3张图片
四、v-if和v-show的比较
1) 相同点:
a. v-if和v-show都可以动态控制DOM元素

2)不同点:
a. v-if显示隐藏是将DOM元素整个添加或者删除,而v-show隐藏则是为元素添加css的一个样式display:none,DOM元素依旧存在。
b. v-if是动态的向DOM树内添加或者删除DOM元素,v-show是通过设置DOM元素的display样式属性控制显隐。

3)性能消耗:
v-if有更高的切换消耗,v-show有更高的初始渲染消耗

4)编译过程:
v-if切换有一个局部编译/卸载的过程,切换过程中合适的销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;v-if是惰性的,如果初始条件为假,则什么也不做,只有条件在第一次变为真时才开始局部编译;v-show是在任何条件下都被编译,然后被缓存,而且DOM元素保留

5)使用场景:
如果需要非常频繁的切换,使用v-show较好,如果在运行时条件很少改变,则使用v-if较好

参考链接:https://www.cnblogs.com/wmhuang/p/5420344.html

你可能感兴趣的:(Vue,vue,javascript,css,html)