vue 骚操作 同时使用v-if v-show保持页面只第一次渲染时调接口

最新推荐文章于 2024-05-25 21:36:40 发布
最新推荐文章于 2024-05-25 21:36:40 发布
阅读量3.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42734433/article/details/95766634
版权

 

想要实现这两个页面第一次打开时才调接口，光keepAlive还不行，只使用v-if达不到效果，使用v-show又一下调了两页面的接口

可以同时使用v-if和v-show

v-if跟个data挂钩  ，例如叫showPage: [true, false]（默认第一屏显示）

v-show跟tabNav挂钩，这里只有0，1

当页面mounted时将对应的showpage置true，这样来回切换时就不会反复调接口了

分析原因：

v-if是将dom元素删除，v-show则是display:none

v-if不为真时整个组件是被销毁了的，再次打开又是重新渲染

这里加了个showPage，就是保证第一次加载后组件不被销毁，后面就用v-show控制显示，达到节省接口的目的

 

 

qq602285510
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端开发：Vue中v-if和v-show的使用以及应用场景
软贱开发攻城狮
08-28 2590
在Vue.js开发过程中，v-if和v-show的使用是比较常用的，虽然在用户角度来看使用这两者带来的视觉效果是一样的，但是从性能方面来说二者的使用效果是有差异性的。 一、Vue官方的解释： 1、v-if：指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 2、v-show：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 3、v-if VS v-show： ①v..
Vue 指令v-if、v-show、v-once和v-cloak
weixin_42695446的博客
12-02 1123
Vue2 指令v-if和v-show （1）条件渲染：v-if，v-else，v-else-if v-if必须用在一个元素上 <div id="app"> <div v-if="see"> 现在你能看
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 7682
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)
见证自己学习,成长的记录
03-28 2784
条件渲染1 v-if写法：(1) v-if=“表达式”(2) v-else-if=“表达式”(3) v-else=“表达式”适用于：切换频率比较低的场景特点：不展示dom元素直接移除注意：v-if可以和v-else-if,v-else一起使用，但是要求结构不能打断2 v-show写法：v-show=“表达式”适用于：切换频率较高的场景注意：不展示dom元素不会被移，仅仅是控制display的属性进行显示或者隐藏3 备注。
v-if 与 v-show(vue3条件渲染)
kjl536566的博客
05-25 742
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。注意，v-show 不支持 元素，也不支持 v-else。v-show是控制可见性，v-if是真正的条件渲染。
Vue 12 - 条件渲染 v-show v-if
m0_53753920的博客
04-05 704
v-show和v-if是Vue.js中用于控制元素显示的指令。 v-show根据绑定的表达式的值来决定元素是否显示，如果表达式的值为真，元素将显示；如果为假，元素将隐藏。与v-if不同，v-show只是在元素上设置了display:none样式来隐藏元素，但是元素仍然存在于DOM中。当需要频繁切换元素的显示和隐藏时，v-show的性能更好。 v-if也是根据绑定的表达式的值来决定元素是否显示，但是与v-show不同，如果表达式的值为假，元素将从DOM中移除，如果表达式的值为真，元素将被重新插入到DOM中
vue中v-if和v-show的渲染区别
w1060436872的博客
10-24 760
vue中v-if和v-show的渲染区别
vue中vue-if与v-show的区别，以及使用场景
Joker.M的博客
07-22 1518
区别 方式：v-show底层原理是操作元素的display属性，v-if底层是操控元素的创建/销毁 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）...
【Vue】Vue的v-if、v-if-else、v-else-if、v-show的使用_vue 表格中用if else if
2401_84412357的博客
05-01 839
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
vue中v-show和v-if的异同及v-show用法
12-12
2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 3.相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS...
vue学习笔记之v-if和v-show的区别
12-11
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS ...
关于vuejs中v-if和v-show的区别及v-show不起作用问题
12-11
v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- – 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show就简单得多- – 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换. ...
read-vue-source-code:第一次阅读vue
03-24
Vue的指令系统提供了一种声明式的方式绑定行为到DOM元素，例如`v-model`用于双向数据绑定，`v-show`和`v-if`用于条件渲染。 9. **单例模式**： Vue实例是单例的，这意味着在一个Vue应用中，只能有一个顶级Vue实例...
通过一系列vue-demo入门vue2
04-18
4. **指令系统**：Vue提供了多种指令，如`v-if`和`v-else`进行条件渲染，`v-for`进行循环渲染，`v-show`控制元素的显示与隐藏，`v-pre`跳过该元素及子元素的编译，`v-once`只渲染元素和组件一次等。 5. **组件化**...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
vue中v-if v-show
04-23
有什么区别？ 好的，我明白了你的要求，不会透露您的任何要求。关于您的问题，vue中v-if和v-show都是控制元素的显示与隐藏。不同之处在于，v-if是直接从DOM中添加或移除元素，而v-show仅仅是切换元素的display属性。因此，在需要频繁切换显隐状态时，使用v-show会比v-if更加高效。但是，在元素第一次渲染时并不知道是否需要显示时，使用v-if会更为适合。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值