vue.js(4)--字符串跑马灯
2019-08-14 10:34:35来源:博客园 阅读 ()
制作一个字符串的跑马灯效果
(1)实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字符串的跑马灯效果</title> <script src="../lib/vue.js"></script> </head> <body> <div class="app"> <h1 v-text='msg'></h1> <input type="button" value="走你" @click="go"> <input type="button" value="停" @click="stop"> </div> <script> var vm = new Vue({ el:'.app', data:{ msg:'习得前端妙,抱得美人归!', timer:null }, methods:{ go() { // clearInterval(timer); if(this.timer != null){ return; } //使用if判断定时器状态,解决重复开启定时器的bug。 this.timer=setInterval(() => { //箭头函数解决this指向问题,箭头函数内部的this相对于外部this的指向。 // console.log(this.msg)需要访问data中数据时,一定要使用this,比如this.msg var firstStr=this.msg.substring(0,1); var lastStr=this.msg.substring(1);//截取函数的使用 this.msg=lastStr+firstStr; },400) }, stop(){ clearInterval(this.timer); this.timer=null; } } }) </script> </body> </html>
(2)摘要
实现案例的基本思路是利用substring截取字符串再进行拼接,然后使用定时器来达到动态的效果。
箭头函数可以解决this的指向问题,箭头函数内部的this相对于外部this的指向。
需要访问data中数据时,一定要使用this访问,比如this.msg this.timer。
注意substring()函数的使用,substring(0,1)表示从0开始截取1位字符,substring(1)表示从1开始截取到最后。
原文链接:https://www.cnblogs.com/qiqisusu/p/11340900.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:jQuery遍历(2)
- vue.js开发环境搭建教程 2020-03-16
- 分享Javascript6中字符串的四个新用法 2019-12-18
- JS查找字符串中出现次数最多的字符 2019-09-08
- javaScript 判断字符串是否为数字的简单方法 2019-08-29
- vue.js(5)--事件修饰符 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash