vue timer demo - 快车库

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <!-- demo root element -->
    <div id="demo">
        <input type="number" v-timer="t1" increase="1" interval="500" v-model="t1" number />
        <input type="number" v-timer="t2" increase="2" interval="1000" v-model="t2" number />
    </div>
    <script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
    <script type="text/javascript">
        'use strict';

        Vue.directive('timer', {
            params: ['increase', 'interval'],
            twoWay: true,
            bind() {
                this.flag = true
                var increase = parseInt(this.params.increase)
                var interval = parseInt(this.params.interval)

                var self = this

                function timeout() {
                    setTimeout(() => {
                        var num = self.vm.$get(self.expression) || 0
                        self.set(num + increase)
                        if (self.flag)
                            timeout()
                    }, interval)
                }

                timeout()
            },
            unbind() {
                this.flag = false
            }
        })

        // bootstrap the demo
        var demo = new Vue({
            el: '#demo'
        })
    </script>
</body>
</html>