v-if VS v-show

news/2024/5/19 22:04:13

在vue实现轮播图效果 中分别用到 v-if和 v-show 下面讲讲我理解的他们的区别:

v-if:

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>,将提出它的内容作为条件块。

v-show:

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>,将提出它的内容作为条件块。

v-if VS v-show:

在切换 v-if块时,Vue.js 有一个局部编译/卸载过程,因为 v-if之中的模板也可能包括数据绑定或子组件。v-if是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。

一般来说,v-if有更高的切换消耗而 v-show有更高的初始渲染消耗。因此,如果需要频繁切换 v-show较好,如果在运行时条件不大可能改变 v-if较好。

因此分别用了v-if和v-show.
我在
处用的v-show,目的是为了让它的 v-on:mouseover= 'showPreNext' v-on:mouseout='hiddenPreNext'能获取到,当 PreNext=false的时候虽然它不显示出来,但它在页面中占着位置,但如果用v-if的话,他的v-on:mouseover= 'showPreNext' v-on:mouseout='hiddenPreNext'就获取不到.

转载于:https://www.cnblogs.com/yingzi1028/p/5627002.html


http://www.niftyadmin.cn/n/3495233.html

相关文章

Alpha 9

摘要 队名&#xff1a;小白吃组长博客&#xff1a;hjj作业博客&#xff1a;冲刺倒计时之9团队部分 后敬甲&#xff08;组长&#xff09; 过去两天完成了哪些任务 答辩准备中和大佬们跟进进度接下来的计划 准备答辩还剩下哪些任务 持续跟进团队项目进度和老师沟通&#xff0c;确…

PYTHON_opencv 历程总览 - updating

OpenCV 是一个在影像与图像处理上非常实用且方便的一个工具&#xff0c;其庞大程度已经可以算是一个平台&#xff0c;支援了各式各样的编程语言&#xff0c;当然 Python 也是包含其中的“之一”&#xff0c;这个包集成了许多当下流行的图像处理算法&#xff0c;成为了他们呼叫函…

Windows消息队列(优先队列,结构体中放比较函数)

Windows消息队列 消息队列是Windows系统的基础。对于每个进程&#xff0c;系统维护一个消息队列。如果在进程中有特定事件发生&#xff0c;如点击鼠标、文字改变等&#xff0c;系统将把这个消息加到队列当中。同时&#xff0c;如果队列不是空的&#xff0c;这一进程循环地从队列…

Java架构-JVM垃圾回收机制

一、简介 Java GC&#xff08;Garbage Collection&#xff0c;垃圾回收&#xff09;机制&#xff0c;是Java与C/C的主要区别之一 在C/C语言中&#xff0c;程序员必须小心谨慎地处理每一项内存分配&#xff0c;且内存使用完后必须手工释放曾经占用的内存空间。当内存释放不够完全…

Qt5.6.0连接SQL Server 2008

本文将介绍如何在Qt中连SQL Server数据库&#xff0c;假设已经具有如下软件环境&#xff1a; win7 64VS 2013Qt 5.6.0(32 msvc)Qt add in 1.2.5SQL Server 2008&#xff08;32、64应该都可以&#xff09;数据库有关问题 如何用sa&#xff08;或者自己建立一个登录名&#xff09…

YOLO3 + Python3.6 深度学习篇(下)- Transfer Learning 迁移学习

上一篇文章链接&#xff1a; YOLO3 Python3.6 实时物体检测篇&#xff08;中&#xff09;- Transfer Learning 迁移学习如同第一个单元所述&#xff0c;这个项目的第三大块就是训练模型的环节了&#xff0c;是整个项目的最终临门一脚。在 “图片数据集” 和 “数据标签文档” …

IE8下不支持console.log()

http://www.xuebuyuan.com/2139615.html http://zkeyword.com/post/console_log/转载于:https://www.cnblogs.com/sj521/p/5630122.html

/proc/sysrq-trigger使用说明

重启服务器 # echo 1 > /proc/sys/kernel/sysrq # echo b > /proc/sysrq-trigger 1. /proc/sys/kernel/sysrq 向sysrq文件中写入1是为了开启SysRq功能。根据linux/Documentations/sysrq.txt中所说&#xff1a;SysRq代表的是Magic System Request Key。开启了这个功能以…