• Vye,v-if 和 v-show 显示隐藏的使用


     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6     </head>
     7     <script src="../js/vue.js"></script>
     8     <body>
     9         <div id="app">
    10         
    11             <!-- 这么写比较麻烦, 因为还要写在 methods里 一个toggle方法 -->
    12             <!-- <input type="button" name="" id="" value="" @click="toggle" /> -->
    13             
    14             <input type="button" name="" id="" value="toggle" @click="flag=!flag" />
    15 
    16             <!-- v-if 的特点:每次都会重新删除或创建元素 -->
    17             <!-- v-show 的特点: 每次不会重新经行DOM的删除和创建操作,只是切换了元素的 display:none 样式 -->
    18             <!-- 按F12打开控制台,观察 v-if 和 v-show 标签 -->
    19             
    20             <!-- v-if 有较高的切换性能消耗 -->
    21             <!-- v-show 有较高的初始渲染消耗 -->
    22             
    23             <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show -->
    24             <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
    25             
    26             <h3 v-if="flag">这是一个v-if控制的元素</h3>
    27             <h3 v-show="flag">这是一个v-show控制的元素</h3>
    28         
    29         </div>
    30     </body>
    31 </html>
    32 <script>
    33     var vm = new Vue({
    34         el:'#app',
    35         data:{
    36             flag:true
    37         },
    38         methods:{
    39         //     toggle(){
    40         //         this.flag  = ! this.flag
    41         //     }
    42         }
    43     })
    44 </script>

       在控制台可以观察到 v-if 和 v-show 的代码显示情况

         

      点击 toggle 按钮,控台代码代码变为下图所示

       

      我们可以看到 v-if消失, v-show的 display属性变为 none,这就是他俩的区别(最详细解释见代码块的//注释)

     2019-06-11 13:23:17

  • 相关阅读:
    基于RMAN从活动数据库异机克隆(rman duplicate from active DB)
    包含min函数的栈
    栈的链表实现
    HDU 2196 树形DP Computer
    linux之access函数解析
    [置顶] sqlplus 使用笔记
    仿新浪微博登陆邮箱提示效果!
    找出数组中出现奇数次的元素<异或的应用>
    SOA体系结构基础培训教程-规范标准篇
    一个寻找.jar 和.zip文件中class文件的工具
  • 原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11003150.html
Copyright © 2020-2023  润新知