Vue实现跑马灯简单效果
更新时间：2021年10月29日 11:24:07 作者：一个小点点.
这篇文章主要为大家详细介绍了Vues实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现跑马灯简单效果的具体代码，供大家参考，具体内容如下
1、跑马灯效果
说明：单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动
2、完整代码 (注意：代码中需要引入vue.js文件，这个文件自己根据目录位置引入，具体位置代码中有注释)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<!-- 引入vue.js文件-->
<script src="../vue.js"></script>
<style type="text/css">
#app{
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<button @click="run">应援</button>
<button @click="stop">暂停</button>
<h3>{{msg}}</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"朋友朋友我爱你，就像老鼠爱大米~~~!",
timer:null //在data上定义定时器timer，默认为null
},
methods:{
run(){
// 如果timer已经赋值就返回
if(this.timer){return};
this.timer = setInterval(() => {
// msg分割为数组
var arr = this.msg.split('');
// shift删除并返回删除的那个，push添加到最后
// 把数组第一个元素放入到最后面
arr.push(arr.shift());
// arr.join('')吧数组连接为字符串复制给msg
this.msg = arr.join('');
},100)
},
stop(){
//清除定时器
clearInterval(this.timer);
//清除定时器之后，需要重新将定时器置为null
this.timer = null;
}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了基于vue-simplemde实现图片拖拽、粘贴功能,需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了vue实现商品规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
下面小编就为大家带来一篇Vue-router路由判断页面未登录跳转到登录页面的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要给大家介绍了关于vue3使用ref获取dom结果为'null'的原因详析,ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,需要的朋友可以参考下2023-07-07
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
这篇文章主要介绍了vue + any-touch实现一个iscroll实现拖拽和滑动动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
目前vite主要默认是支持给vue3使用的,并且如果使用官方的cli创建的项目一样会默认使用vue3去构建项目,此时对于一些vue2的老项目就显得不友好了,下面这篇文章主要给大家介绍了关于vue2老项目vite升级改造的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vant Weapp组件picker选择器初始默认选中问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论