我们都知道,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的执行顺序的更多相关文章

  1. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  2. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  3. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  4. Java 中 try、catch、finally 语句块的执行顺序

    假设代码顺序书写如下:try → catch → finally → 其他代码 则: 1.正常执行顺序:try → catch → finally → 其他代码 2.try,catch和finally ...

  5. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

  6. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  7. vue中watch的详细用法(转载)

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  8. vue中this.$set的用法

    之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...

  9. vue中watch的详细用法(深度侦听)

    vsCode插件 在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-m ...

  10. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

随机推荐

  1. 手把手带你做LiteOS的树莓派移植

    摘要:树莓派是英国的慈善组织"Raspberry Pi 基金会"开发的一款基于arm的微型电脑主板.本文介绍基于LiteOS的树莓派移植过程. 本文分享自华为云社区<2021 ...

  2. ServiceWorker工作机制与生命周期:资源缓存与协作通信处理

    在 <web messaging与Woker分类:漫谈postMessage跨线程跨页面通信>介绍过ServiceWorker,这里摘抄跟多的内容,补全 Service Worker 理解 ...

  3. 《consul 简易上手指南》

    consul 是一个用来做服务发现的框架,具有分布式.高可用以及可横向扩展的特性 什么是服务发现?为什么要实现服务发现? 举个常见的例子: 假设有一台 client 想要实现不同的业务,就需要调用接口 ...

  4. 经典Python案例实现

    入门_30个常用python实现 .pdf 一. 二. 三. 四. 五.函数篇 5.1 计算圆的面积 from math import pi as PI def CircleArea(r): if i ...

  5. 2017年第八届 蓝桥杯C组 C/C++决赛题解

    蓝桥杯历年国赛真题汇总:Here 1.哥德巴赫分解 哥德巴赫猜想认为:不小于4的偶数都可以表示为两个素数的和. 你不需要去证明这个定理,但可以通过计算机对有限数量的偶数进行分解,验证是否可行. 实际上 ...

  6. redis管道技术pipeline二——api

    package spring.redis; import org.springframework.beans.factory.InitializingBean; import org.springfr ...

  7. 使用aop去自定义注解,实现用户在请求的时候记录下来,如日志功能等

    首先搞清楚aop的几个概念: AOP即是面向切面,是Spring的核心功能之一,主要的目的即是针对业务处理过程中的横向拓展,以达到低耦合的效果. 「切面(Aspect)」:一个关注点的模块化.以注解@ ...

  8. 【调试】kprobes(一)基本概念

    简介 开发人员在内核或者模块的调试过程中,往往会需要要知道其中的一些函数有无被调用.何时被调用.执行是否正确以及函数的入参和返回值是什么等等. 比较简单的做法是在内核代码对应的函数中添加日志打印信息, ...

  9. RLHF · PbRL | 速通 ICLR 2024 RLHF

    检索关键词:ICLR 2024.reinforcement learning.preference.human feedback. https://openreview.net/search?term ...

  10. 数字IC设计全流程介绍

    数字IC设计全流程设计 掌握数字集成电路设计的流程 数字设计流程中每个阶段主要做哪些工作? 数字设计流程中每个阶段使用的主要EDA工具? 数字电路常用软件公司Mentor(questasim),Syn ...