vue中定时器一般用法，定时器函数传参以及清除定时器

一、vue中定时器一般用法（举个例子）

显示当前时间， setInterval()方法会每秒执行一次函数，类似手表功能：

   <template><div class="userprofile"><div><h1 id="title">UserProfile_header</h1>现在时间：<span>{{t}}</span></div></div></template><script>export default {name: 'UserProfile',data () {return {t: '', //现在时间timer: '', //接收定时器    }},methods:{myTimer() {let d = new Date();this.t = d.toLocaleTimeString();},myStopFunction() {clearInterval(timer);}},mounted() {let that = this;that.timer= setInterval(this.myTimer, 1000); //第一个参数不可以写成this.myTimer()},destroyed() {//清除定时器clearInterval(this.timer);console.log("beforeDestroy");},}</script>

二、定时器函数传参

1.使用第3到n个参数传参 ( IE9 及其更早版本不支持）：

 //传递参数给 alertFunc 函数var myVar;function myStartFunction() {myVar = setInterval(alertFunc, 2000, "Runoob", "Google");}

2.如果使用匿名函数，则所有浏览器都支持：

 //传递参数给 alertFunc 函数var myVar;function myStartFunction() {myVar = setInterval(function(){ alertFunc("Runoob", "Google"); }, 2000);}

三、别忘了在组件销毁时清除定时器哦

在mounted中创建并执行定时器
然后在beforeDestroy或者destroyed中清除定时器

    <template><div class="about"></div></template><script>export default {name: "about",data() {return {//接收定时器timer: ""};},mounted() {let _this = this;let num = 0;//创建并执行定时器this.timer = setInterval(() => {//当num等于100时清除定时器if (num == 100) {clearInterval(_this.timer);}console.log(num++);}, 1000);},beforeDestroy() {//清除定时器（可选）clearInterval(this.timer);console.log("beforeDestroy");},destroyed() {//清除定时器（可选）clearInterval(this.timer);console.log("destroyed");}};</script><style scoped></style>

vue中定时器一般用法，定时器函数传参以及清除定时器相关推荐

vue中使用pug语法调用函数传参 mixin
npm i -D pug pug-html-loader pug-plain-loadermodule.exports = {chainWebpack: config => {config.mo ...
vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
【Python】「argparse基本用法」及「jupyter中使用 args = parser.parse_args()并传参」
主要是对该项目dgl/examples/pytorch/metapath2vec at master · dmlc/dgl · GitHub中代码的理解. 对于metapath2vec.py文件内容: ...
oracle中类似indexof用法_instr函数
oracle中类似indexof用法_instr函数 [sql] 在oracle中没有indexof()函数但是提供了一个 instr() 方法具体用法: select instr('保定市南市区 ...
C语言指针在函数传参中的使用
int add(int a, int b) //函数传参的时候使用了int整型数据,本身是数值类型.实际调用该函数时,实参将自己拷贝一份,并将拷贝传递给形参进行运算.实参自己实际是不参与运算的.所 ...
python函数传值还是地址_python中给函数传参是传值还是传引用
首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传 ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
C语言与java中函数传参比较
C语言与java中函数传参比较首先先说结论:C语言中参数传递有值传递,地址传递,引用传递.但java中的参数传递只有值传递 1.C语言中的参数传递 1>值传递值传递非常好理解,其实就是对函数 ...

vue中定时器一般用法，定时器函数传参以及清除定时器

一、vue中定时器一般用法（举个例子）

二、定时器函数传参

三、别忘了在组件销毁时清除定时器哦

vue中定时器一般用法，定时器函数传参以及清除定时器相关推荐

最新文章

热门文章