Vue跑马灯

/ 0评 / 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <button @click="begin">begin</button>
    <button @click="stop">stop</button>
    <p>{{msg}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'this is a test',
            intervalId:null,
        },
        methods:{ 
            begin () { 
                var _this = this; 
                if(this.intervalId != null) return; 
                this.intervalId = setInterval( () => { 
                    var s = _this.msg.substring(0,1);
                    var e = _this.msg.substring(1); 
                    _this.msg = e + s; },300) }, 
             stop () { 
                    clearInterval(this.intervalId); 
                    this.intervalId = null;
                    },
             },
         }) 
</script> 
</body>
</html>

演示地址:http://chen97.cn/demo/pmd/index.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注