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 ...
随机推荐
- OpenHarmony移植案例与原理:如何适配服务启动引导部件bootstrap_lite
摘要:本文介绍移植开发板时如何适配服务启动引导部件bootstrap_lite,并介绍相关的运行机制原理. 本文分享自华为云社区<OpenHarmony移植案例与原理 - startup子系统之 ...
- Docker 下自定义安装 Tomcat
服务器环境建好以后,如果要扩展,只需要执行(详细命令到下文中找)docker run .....发完版本需要重启服务,执行(详细命令到下文中找)docker restart [容器的ID] 将文件传到 ...
- 【python爬虫】 request模块介绍 http协议版本区别 双token认证 携带cookie的两种方式 requests.session的使用 post请求携带数据编码格式 request.text编码问题 下载图片,视频
目录 上节回顾 今日内容 1 爬虫介绍 2 request模块介绍 3 request发送get请求 4 request携带参数 5 url编码解码 6 携带请求头 http协议版本之间的区别 7 发 ...
- C#9.0:Init
背景 在以前的C#版本里面,如果需要定义一个不可修改的的类型的做法一般是:声明为readonly,并设置为只包含get访问器,不包含set访问器.如下: 1 public class PersonIn ...
- JSP常见错误以及解决方案
原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 本节我们分析一下常见的 JSP 错误信息,并给出解决方案.这些错误在实际开发中会经常遇到,所以有 ...
- MPI Maelstrom POJ - 1502 ⭐⭐ 【Dijkstra裸题】
MPI Maelstrom POJ - 1502 实验室有很多台计算机,由于每个人计算机的性能不同,导致计算机之间发送信息的速度不同,所以花费时间不同. 消息从第一台电脑发送到第二台电脑后,这两台电脑 ...
- 0x62 图论-最小生成树
A题:走廊泼水节 链接:https://ac.nowcoder.com/acm/contest/1056/A 题目描述 给定一棵N个节点的树,要求增加若干条边,把这棵树扩充为完全图,并满足图的唯一最小 ...
- L3-020 至多删三个字符 (30分) (DP)
问题描述: 给定一个全部由小写英文字母组成的字符串,允许你至多删掉其中 3 个字符,结果可能有多少种不同的字符串? 输入格式: 输入在一行中给出全部由小写英文字母组成的.长度在区间 [4, 1e6] ...
- Nacos注册中心搭建
1.Nacos服务端搭建(需要有java环境),下载地址:https://github.com/alibaba/Nacos/releases 下载对应操作系统的包解压. 1.1.解压:tar -zxv ...
- 【驱动】以太网扫盲(二)phy寄存器简介
PHY 寄存器的地址空间为 5 位,从 0 到 31 最多可以定义 32 个寄存器(随着芯片功能不断增加,很多 PHY 芯片采用分页技术来扩展地址空间以定义更多的寄存器),IEEE802.3 定义了地 ...