• v-if条件判断及v-show

    一、v-if 的基本使用

    v-if用于条件判断，判断Dom元素是否显示。

    1. DOCTYPE html>
    3. 	
    4. 		
    5. 		
    6. 		
    7. 	
    8. 	
    9. 		
    10. 			
      我们是勇于战斗的
    11. 			
    12. 			
      我们是青少年
    13. 			
      我们是18到60的青壮年
    14. 			
      大于60岁我们是老年人
    15.

    • 输入各不同年龄段效果：

     当isFlag 为false时—隐藏DOM元素

     

     二、v-if 的demo

      在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

       

           

           

           

       

       

           

               

                   

                   

               

               

                   

                   

               

               

           

           

       

    使用v-if和v-else选择渲染指定的Dom，点击按钮对isUser变量取反。 

     这里有个小问题，如果已经输入了账号了，此时想切换到邮箱输入，输入框未自己清空。

    ​ 这里需要了解一下vue底层操作，此时input输入框值被复用了。

    1. vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。

    2. 在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。

    3. 如果不希望出现类似复用问题，可以给对应的dom元素加上key值，并保证key不同。

    key="username">
    key="email">

    三、v-show 以及v-if 的区别

    v-show 和 v-if 都有按需控制DOM的显示与隐藏

    实现原理：

    v-if 指令会动态的创建或移除DOM元素，从而控制元素在页面上的显示与隐藏

    v-show 指令会动态为元素添加或移除style="dispaly:none;"样式，从而控制元素的显示与隐藏

    区别：

    v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此：

    • 如果需要非常频繁地切换，则使用v-show较好
    • 如果在运行时条件很少改变，则使用v-if较好
    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   Document
    10.   
    11.     
      v-show只是操作元素的style属性display
    12.     
      v-if是新增和删除dom元素
    13.

    • ​ v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

    ​ v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

    四、v-for 中的key

    1. DOCTYPE html>
    4.     
    5.     
    6.     
    7.     Document
    8.     
    11.     
    12.         
      {{item.name}}-{{item.age}}
    13.             
    14.         
    15.         
    16.

    • 若用 index

           

    {{item.name}}-{{item.age}}

               

           

           

       

     

     

    总结：

    key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。

    为何不推荐index作为key值:

    当以数组为下标的index作为key值时，其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变
    diff算法时比较同级之间的不同，以key来进行关联，当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的index都会发生改变，那么key自然也跟着全部发生改变，所以index作为key值是不稳定的，而这种不稳定性有可能导致性能的浪费，导致diff无法关联起上一次一样的数据。因此，能不使用index作为key就不使用index。
     

    diff算法相关内容：https://www.jianshu.com/p/32dc90014589

  • 相关阅读:
    排查Windows内存泄漏问题的详细记录
    用 Hugging Face 推理端点部署 LLM
    有哨兵位双向循环链表
    java计算机毕业设计学生协会管理系统MyBatis+系统+LW文档+源码+调试部署
    Java中「Future」接口详解
    想去银行测试？那这套题目你必须要会
    Java阻塞队列中的异类，SynchronousQueue底层实现原理剖析
    cpp中this和*this区别
    SQL小技巧之替换、统计表字段存储数据字节大小。
    JVM之jps虚拟机进程状态工具
  • 原文地址：https://blog.csdn.net/qq_53841687/article/details/126124236