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 相关文章推荐
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
jQuery插件开发全解析
2012/10/10 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
企业总经理职责
2014/02/02 职场文书
小学教师师德感言
2014/02/10 职场文书
高中家长寄语
2014/04/02 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
优秀党员事迹材料
2014/12/18 职场文书
全陪导游词
2015/02/04 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
如何在C++中调用Python
2021/05/21 Python
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏