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 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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将文本文件转换csv输出的方法
2014/12/31 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
javascript调试说明
2010/06/07 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
js实现带积分弹球小游戏
2020/07/21 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python 文件和输入输出小结
2013/10/09 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
python实现邮件自动发送
2019/08/10 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
残疾人小组计划书
2014/04/27 职场文书
给校长的建议书600字
2014/05/15 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
财政局长个人总结
2015/03/04 职场文书
行政处罚决定书
2015/06/24 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python