vue定时显示组件

一.需求

在vue中如果需要做定时操作时，需要用到定时器。

比如说我需要定时显示一个组件，并使用v-show指令来实现显示。

二.实现

那么需要在data中定义两个属性
timer:’’,
value:0
在生命周期钩子mounted中进行添加定时器操作 this.timer = setInterval(this.get, 1000)
这样初始化时就会创建一个定时器，1000ms = 1s，则每秒都会运行 this.get函数
至于get函数，在methods中定义
get: function () {
this.value = this.value + 1
}

那么这时候在methods中定义一个isShow函数，传入一个参数time，该参数表示显示组件的时间。
isShow: function (time) {
if (time >= this.value) return false
else return true
}

若传入参数 time为5，那么当time小于当前计时器数时，返回true，即显示组件。

调用:
在template中使用

<Heart v-show="isShow(1)"  />

三.效果

下图是在1秒，3秒，5秒显示爱心，这边的爱心是组件

四.参考链接

1.https://www.cnblogs.com/jin-zhe/p/10001236.html