Vue increase自增带暂停

这里说一下,这个demo就是个普通的小练习,没啥意思,更没有任何技术含量,主要是想重温一下

直接上代码吧,写过的代码通通记下来

<div id="app">
    {{ counter }}
    <button @click="stop">Stop</button>
</div>
const App = {
    data () {
        return {
            counter: 0,
            timer: null
        }
    },
    mounted () {
        this.increase()
    },
    methods: {
        increase () {
            this.timer = setInterval(() => {
                this.counter++
            }, 100)
        },
        stop () {
            clearInterval(this.timer)
        }
    }
}
Vue.createApp(App).mount('#app')

显示效果:刚打开页面加载完成后,数字开始加加加一直加,点一下Stop按钮,数字停止自动增加。

这个愉快的编码又匆匆结束了,等15分钟后继续 下一个demo😘

本文系作者 @ 原创发布在 徐小鹏的个人分享博客。未经许可,禁止转载。

喜欢()
评论 (0)
21 文章
7 评论
1 喜欢
Top