Vue经典实例之走马灯

<!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个内容想连接赋值给 Contentthat.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>

Vue经典实例之走马灯相关推荐

Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白
最主要就是用到属性的绑定 :class (动态绑定多个class) :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',select ...
历时一个月！50+Vue经典面试题详解，值得收藏！
大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
JavaScript - Vue经典教程系列-李游Leo-专题视频课程
JavaScript - Vue经典教程系列-1114人已学习课程介绍 Vue.JS 是目前火的前端框架之一,是一个构建数据驱动的 web 界面的渐进式框架. Vue.JS 的目标是 ...
matlab土体变形实例,ansys案例——20例ansys经典实例】.pdf
ansys案例--20例ansys经典实例] [ANSYS 算例]3.3.7(3) 三梁平面框架结构的有限元分析针对 [典型例题]3.3.7(1) 的模型,即如图3-19 所示的框架结构,其顶端受均 ...
一个线程中lock用法的经典实例
1 /* 2 该实例是一个线程中lock用法的经典实例,使得到的balance不会为负数 3 同时初始化十个线程,启动十个,但由于加锁,能够启动调用WithDraw方法的可能只能是其中几个 4 作者: ...
.net ticks 转java_《C#并发编程经典实例》—— 转换.NET事件
声明:本文是<C#并发编程经典实例>的样章,感谢图灵授权并发编程网站发布样章,禁止以任何形式转载此文. 问题把一个事件作为 Rx 输入流,每次事件发生时通过 OnNext 生成数据. 解 ...
SQL经典实例（五）元数据查询
列举模式中的表 Oracle select table_name from all_tables where owner = 'SCOTT'; MySQL select table_namefrom ...
python编程入门经典实例-终于明了python入门经典实例
算术最基本的操作符,是小学数学的+ - * / ,对于整数,还可以用+=,*=的操作符,对自身的值进行改变(对象引用).以下是小编为你整理的python入门经典实例对于整数的加减乘除,但需要注意的是 ...
python编程入门经典实例-总算明了python编程入门经典实例
跟Java语言一样,python语言也有类的概念,直接使用class关键字定义python类.在python类,定义类的方法.然后直接使用类的初始化调用自身,获取相应的属性.以下是小编为你整理的pyt ...

Vue经典实例之走马灯

Vue经典实例之走马灯相关推荐

最新文章

热门文章