Vue实现简单的跑马灯


Posted in Javascript onMay 25, 2020

Vue实现滚动字条/跑马灯,供大家参考,具体内容如下

内容不多,直接看代码吧

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../资料/js/vue.js"></script> <!-- 引入Vue-->
 </head>
 <style>
  *{
   text-align: center;
  }
 </style>
<body>
<div id="app">
 <h1>{{txt}}</h1>
 <button @click="run">开始</button>
 <button @click="stop">停止</button>
</div>

</body>
</html>

<script>
 new Vue({
  el:'#app',
  data:{
   txt:"吾疑君驭车而飚之,然苦于无证以示众。",
   timer:null
  },
  methods:{
   run(){
    if(this.timer != null){
     return;
    }
    this.timer = setInterval(()=>{
      let start = this.txt.substring(0,1);//截取下标为0的字符串
      let end = this.txt.substring(1);//截取从下标为1到结束的字符串
      this.txt = end + start;
    },300);
   },
   stop(){
    clearInterval(this.timer)
   }
  }
 })
</script>

效果如下图:

Vue实现简单的跑马灯

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Array扩展实现代码
Oct 14 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
分析JS中this引发的bug
Dec 12 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
js Proxy的原理详解
May 25 Javascript
Vue实现跑马灯效果
May 25 #Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 #Javascript
ES2020 已定稿,真实场景案例分析
May 25 #Javascript
Javascript原型链及instanceof原理详解
May 25 #Javascript
Node登录权限验证token验证实现的方法示例
May 25 #Javascript
详解Node.js使用token进行认证的简单示例
May 25 #Javascript
基于redis的小程序登录实现方法流程分析
May 25 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python实现的凯撒密码算法示例
2018/04/12 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python实现浪漫的烟花秀
2019/01/30 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
群众路线学习笔记范文
2014/11/06 职场文书
2014年实习期工作总结
2014/11/27 职场文书
护士求职自荐信
2015/03/25 职场文书
留学推荐信英文范文
2015/03/26 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Nginx 匹配方式
2022/05/15 Servers