master

分支 (1)

管理

管理

master

learn-vue
/
demo_004.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <!-- 走马灯例子，体会Vue的强大之处 -->

    <div id="app">
        {{str}}
        <br />
        <button @click="go">go</button>
        <button @click="stop">stop</button>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                str: "飞雪连射天白鹿，笑书神侠倚碧鸳",
                intervalId: null
            },
            methods: {
                go: function() {
                    if(this.intervalId != null) return;
                    // 每次开启一个定时器，都会返回一个定时器的对象。
                    // 我们还可以通过定时器对象，停止一个定时器实例的运行。
                    this.intervalId = setInterval(()=> {
                        // 在methods的函数中，this代表当前Vue实例本身
                        // 重点在于，没有进行DOM操作
                        this.str = this.str.substring(1) + this.str.substring(0,1);
                    }, 100);
                },
                stop: function() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            }
        });
    </script>

</body>
</html>