• VUE课程参考---16、条件渲染v-show


    VUE课程参考---16、条件渲染v-show

    一、总结

    一句话总结:

    条件渲染指令除了v-if,还有v-show,v-show指令用于根据元素的状态控制元素的显示和隐藏
    <div id="app">
        <p v-if="ok">{{'v-if:'+msg}}</p>
        <p v-show="ok">{{'v-show:'+msg}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '我有一只小毛驴,我永远也不骑',
                ok:true
            }
        });
    </script>

    1、条件渲染指令v-if和v-show的区别?

    -、v-if是真正的条件渲染,v-if中对应的元素的状态为true的时候,元素才被渲染出来,否则不被渲染
    -、v-show只是简单的改变元素的display属性,v-show中对应的元素的状态为false时,元素的display属性变为none,所以不被显示

    2、条件渲染指令v-if和v-show的 性能消耗问题?

    *、v-if指令性能消耗问题:每次元素改变状态,都要被重新渲染,所以元素的切换性能消耗比较大
    *、v-show指令性能消耗问题:v-show控制的元素最初都会被渲染出来,每次改变状态,只是改变元素的display属性的值,所以元素的初始性能消耗比较大

    3、条件渲染指令v-if和v-show的使用场景?

    ^、v-if使用场景:很少被切换状态的元素,或者可能永远都不被显示的元素
    ^、v-show使用场景:被经常切换状态的元素

    二、条件渲染v-show

    博客对应课程的视频位置:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>16、条件渲染v-show</title>
     6 </head>
     7 <body>
     8 <!--
     9 
    10 条件渲染指令除了v-if,还有v-show,v-show指令用于根据元素的状态控制元素的显示和隐藏
    11 
    12 条件渲染指令v-if和v-show的区别
    13 -、v-if是真正的条件渲染,v-if中对应的元素的状态为true的时候,元素才被渲染出来,否则不被渲染
    14 -、v-show只是简单的改变元素的display属性,v-show中对应的元素的状态为false时,元素的display属性变为none,所以不被显示
    15 
    16 条件渲染指令v-if和v-show的 性能消耗问题
    17 *、v-if指令性能消耗问题:每次元素改变状态,都要被重新渲染,所以元素的切换性能消耗比较大
    18 *、v-show指令性能消耗问题:v-show控制的元素最初都会被渲染出来,每次改变状态,只是改变元素的display属性的值,所以元素的初始性能消耗比较大
    19 
    20 条件渲染指令v-if和v-show的使用场景
    21 ^、v-if使用场景:很少被切换状态的元素,或者可能永远都不被显示的元素
    22 ^、v-show使用场景:被经常切换状态的元素
    23 
    24 
    25 -->
    26 <div id="app">
    27     <p v-if="ok">{{'v-if:'+msg}}</p>
    28     <p v-show="ok">{{'v-show:'+msg}}</p>
    29 </div>
    30 <script src="../js/vue.js"></script>
    31 <script>
    32     let vm = new Vue({
    33         el: '#app',
    34         data: {
    35             msg: '我有一只小毛驴,我永远也不骑',
    36             ok:true
    37         }
    38     });
    39 </script>
    40 </body>
    41 </html>

     
  • 相关阅读:
    day4-1
    day3-1
    day1-3
    day2-1
    day1-2
    day1 1
    对象的高度整合
    类和数据类型
    对象的绑定方法
    python总结
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12733333.html
Copyright © 2020-2023  润新知