Vue实现跑马灯效果


Posted in Javascript onMay 25, 2020

本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下

实现的业务逻辑

1、给[嗨起来]按钮,绑定一个点击事件 v-on(@)。
2、在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置。
3、为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中。

Vue实现跑马灯效果

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="vue.min.js"></script>
</head>
<body>
 <div id="app">
 <input type="button" value="嗨起来" @click="bejin">
 <input type="button" value="停下" @click="stop">
 <h4>{{msg}}</h4>
 </div>
 <script>
 //注意:在vm实例中,想获取data数据或调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问,该this表示我们new出来的vm实例对象
 var vm=new Vue({
 el:'#app',
 data:{
 msg:'嗨起来,跑马灯~~',
 intervalId:null
 },
 methods:{
 bejin(){
 if(this.intervalId!=null) return
 //箭头解决this指向问题,由内部的指向外部
 this.intervalId=setInterval(()=>{
 //获取到头的第一个字符
 var start=this.msg.substring(0,1)
 //获取到后面的所有字符
 var end=this.msg.substring(1)
 //重新拼接得到新的字符串,并赋值给this.msg
 this.msg=end+start
 //注意:vm实例,会监听自己身上data中所有数据的改变,只要数据一发生变化,就会把最新数据,从data上同步到页面中去
 },50)
 },
 stop(){//停止计时器
 clearInterval(this.intervalId)
 //每当清除了定时器后,需要重新把intervalId置为null
 this.intervalId=null;
 }
 }
 })
 </script>
</body>
</html>

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

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

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

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

Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery 联动日历实现代码
May 31 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
JSONP解决JS跨域问题的实现
May 25 #Javascript
You might like
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
文本域中换行符的替换示例
2014/03/04 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
jQuery实现表格隔行换色
2018/09/01 jQuery
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python web框架学习笔记
2016/05/03 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
《在家里》教后反思
2014/03/01 职场文书
西式婚礼主持词
2014/03/13 职场文书
补充协议书范本
2014/04/23 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS