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 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
原生js实现3D轮播图
Mar 21 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
食品安全处置方案
2014/06/14 职场文书
新闻稿格式范文
2015/07/18 职场文书
干部考核工作总结
2015/08/12 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2016春季小学开学寄语
2015/12/03 职场文书