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 ...
随机推荐
- 教你从零搭建Web漏洞靶场OWASP Benchmark
摘要:Owasp benchmark 旨在评估安全测试工具的能力(准确率.覆盖度.扫描速度等等),量化安全测试工具的扫描能力,从而更好得比较各个安全工具优缺点. 本文分享自华为云社区<Web漏洞 ...
- 一文带你熟知ForkJoin
摘要:ForkJoin将复杂的计算当做一个任务,而分解的多个计算则是当做一个个子任务来并行执行. 本文分享自华为云社区<[高并发]什么是ForkJoin?看这一篇就够了!>,作者:冰 河. ...
- iOS描述文件(.mobileprovision)一键申请
转载:IOS描述文件制作教程 iOS描述文件(.mobileprovision)一键申请 在主界面上点击描述文件按钮. 编辑切换为居中 添加图片注释,不超过 140 字(可选) 新建ios ...
- Net 高级调试之十六:平台互用性及P/Invoke和内存泄漏调试
一.简介 今天是<Net 高级调试>的第十六篇文章,也是这个系列的最后一篇文章了.既然是最后一篇文章,我需要在这里说明一下,我当前的这个系列,不是针对<Net 高级调试>这本书 ...
- 火山引擎 DataTester:0 代码也能实施 A/B 测试的实验平台
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 近日,火山引擎 DataTester 对 A/B 实验"可视化编辑器"进行了升级,可视化编辑器功能让用 ...
- CNCF大使预测:2024年云原生面临倦怠、离职及云成本精简
本文由 CNCF 大使 Eric D. Schabell 撰写,预测2024年云原生领域最可能发生的3大变化,并与其对云原生可观测性领域的见解结合. 关注云原生倦怠 毫无疑问,在 2023 年中云原生 ...
- 一文聊透 IP 地址的那些事
IP 地址,是一个大家都耳熟能详的名词.以生活举例,IP 在互联网中的作用就像是寄件时的收件人地址和寄件人地址,收件人地址让信件可以被正确送达,寄件人地址则让收到信的人可以回信. IP 地址作为每一个 ...
- jdk1.8: Consumer函数
场景: 当我们在a方法中,需要把某些参数赋值给一个Integer类型的对象,而该对象只有在b方法才能赋值,那么我们可以在a方法中使用consumer记录我们要执行的操作,再把consumer作为参数传 ...
- Django 对实体的增删改查样例
class UserInfo(models.Model): """ 人员信息 """ user_id = models.CharField( ...
- 五、java操作redis
系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis --demo主方法 package com. ...