Vue经典实例之走马灯

水深无声 2021-07-25 02:39 564阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="GBK">
            <title></title>
        </head>
    
        <body>
            <div id="app">
            	<button @click="attack">骑兵连进攻</button>
    		    <button @click="retreat">骑兵连撤退</button>
    		    <h3>{
       {content}}</h3>
            </div>
        </body>
        <script src="vue.js"></script>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                	timer:null,
    	            content:'狼行千里吃肉，狗行千里吃屎，我独立团到哪都是嗷嗷叫的野狼！进攻进攻！！！'
                },
                methods:{
                	attack:function(){
                		var that=this;
                		//清除定时器，防止重复点击
                		clearInterval(that.timer);
                		that.timer=setInterval(function(){
                			//that.content.substr(1) ==> 取到content第1位到结尾的内容（不包含第1位）
                			//that.content.substr(0,1) ==> 取到content的第1位
                			//将以上2个内容想连接赋值给 Content
                			that.content =that.content.substr(1) + that.content.substr(0,1);
                		},400);
                		//也可以改成箭头函数，这样就无需把this赋值改成that
                		/*this.timer=setInterval(()=>{
                			this.content =this.content.substr(1) + this.content.substr(0,1);
                		},600);*/
                		
                		
                	},
                	retreat:function(){
                		clearInterval(this.timer);//停止定时器
                	}
                }
            });
            
        </script>
    </html>