Vue跑马灯

跑马灯案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="strat" :disabled="this.clearInt!=null">
        <input type="button" value="低调" @click="end" :disabled="this.clearInt==null">
        <div>{{data}}</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            data: "好好学习，天天向上，，，oooooo",
            clearInt: null,
            // dis: this.clearInt!=null
        },
        methods: {
            strat() {
                clearInterval(this.clearInt)
                this.clearInt = setInterval(() => {
                    // this.data = this.data.substr(1) + this.data.substr(0, 1)
                    // this.data = this.data.substring(1) + this.data.substring(0, 1)
                    this.data = this.data.slice(1) + this.data.slice(0, 1)
                }, 300);
            },
            end() {
                clearInterval(this.clearInt);
                this.clearInt = null;
            }
        }


    })
</script>

</html>

 

posted @ 2020-09-06 21:04  橘雎  阅读(198)  评论(0)  编辑  收藏  举报