vue中v-show你不知道的用法 created computed mounted的执行顺序
我们都知道,v-show的值是一个布尔类型的。
我通过这个值进行显示或者隐藏。
但是有些时候,这个值是true还是false,我们需要去进行计算
此时我们就可以使用v-show="XXX()"
通过XXX()这个方法来返回true或者false
<div class="demo-div" v-show="comBoolenWay()">我是显示或者隐藏</div>
methods: {
comBoolenWay() {
return true
}
},
如果这个数据不会频繁的发生该变,你也可以使用vue中的computed来进行缓存数据
conputed时有缓存的,当数据发生改变的时候,就会进行计算
<div class="demo2-div" v-show="showWay">显示====隐藏</div>
dec: "1213",
computed: {
showWay: function () {
return this.dec ? true : false;
}
},
当页面进行渲染的时候,就会去执行computed中的showWay方法,
如果值时true,这显示,否者就不显示。
我想问此时在created中写一个函数,computed中写一个函数 和 mounted中写一个函数
你知道函数的执行顺序吗
是created先执行。因为created是初始化data中的值。因此最先执行
然后是 执行computed中的,因为此时html正在被渲染,所以去执行computed
最后是monted()因为这个函数此时已经将页面渲染完成了。
<div class="demo2-div" v-show="showWay">显示====隐藏</div>
data(){
return{
dec: "1213",
}
}
created() {
console.log("created");
},
mounted() {
console.log("mounted");
},
computed: {
showWay: function () {
console.log("computed");
return this.dec ? true : false;
}
},
vue中v-show你不知道的用法 created computed mounted的执行顺序的更多相关文章
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- Java 中 try、catch、finally 语句块的执行顺序
假设代码顺序书写如下:try → catch → finally → 其他代码 则: 1.正常执行顺序:try → catch → finally → 其他代码 2.try,catch和finally ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- vue中watch的详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中watch的详细用法(转载)
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中this.$set的用法
之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...
- vue中watch的详细用法(深度侦听)
vsCode插件 在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-m ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
随机推荐
- 论文解读丨无参数的注意力模块SimAm
摘要:本文提出了一个概念简单但对卷积神经网络非常有效的注意力模块. 本文分享自华为云社区<论文解读系列三十:无参数的注意力模块SimAm论文解读>,作者:谷雨润一麦. 摘要 本文提出了一个 ...
- 对话 BitSail Contributor | 梁奋杰:保持耐心,享受创造
2022 年 10 月,字节跳动 BitSail 数据引擎正式开源.同期,社区推出 Contributor 激励计划第一期,目前已有 13 位外部开发者为 BitSail 社区做出贡献,成为了首批 B ...
- 火山引擎 DataLeap:数据秒级生产,揭秘电商实时数仓最佳实践!
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 一年一度的「三八大促」刚刚落下帷幕,各大电商平台纷纷推出补贴.营销等玩法,力图推动持续增长.而电商平台持续增长,离 ...
- CountDownLatch、CyclicBarrier 使用区别
主要区别 CountDownLatch:所有子线程完成后,再执行主线程 CyclicBarrier: 所有子线程就绪后,再执行子线程 CountDownLatch 所有子线程完成后,再执行主线程 多线 ...
- L2-018 多项式A除以B (25 分) (math)
这仍然是一道关于A/B的题,只不过A和B都换成了多项式.你需要计算两个多项式相除的商Q和余R,其中R的阶数必须小于B的阶数. 输入格式: 输入分两行,每行给出一个非零多项式,先给出A,再给出B.每行的 ...
- 使用 Preload&Prefetch 优化前端页面的资源加载
对于前端页面来说,静态资源的加载对页面性能起着至关重要的作用.本文将介绍浏览器提供的两个资源指令-preload/prefetch,它们能够辅助浏览器优化资源加载的顺序和时机,提升页面性能. 一.从一 ...
- 如何让 Llama2、通义千问开源大语言模型快速跑在函数计算上?
本文是"在Serverless平台上构建AIGC应用"系列文章的第一篇文章. 前言 随着ChatGPT 以及 Stable Diffusion,Midjourney 这些新生代 A ...
- 阿里云 Serverless 应用引擎(SAE)2
8月7日,阿里云 Serverless 应用引擎(SAE)2.0正式公测上线!全面升级后的SAE 2.0具备极简体验.标准开放.极致弹性三大优势,应用冷启动全面提效,秒级完成创建发布应用,应用成本下降 ...
- 二、Mycat安装
系列导航 一.Mycat实战---为什么要用mycat 二.Mycat安装 三.mycat实验数据 四.mycat垂直分库 五.mycat水平分库 六.mycat全局自增 七.mycat-ER分片 万 ...
- 【内核】深入分析内核panic(一)--内核问题的原因
1 概述 linux内核包括进程管理.内存管理.中断管理.设备驱动.同步机制等各种模块,它们共同运行在一个共享的地址空间中,因此在运行中一旦出现问题,彼此之间可能具有千丝万缕的联系. 而且与用户态不同 ...