Vue经典实例之走马灯

最新推荐文章于 2024-08-22 02:07:07 发布

编程界小明哥

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dkm123456/article/details/110954507

版权

vue 专栏收录该内容

16 篇文章 13 订阅

订阅专栏

<!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>