vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援
1、效果图
2、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<!-- 引入vue.js-->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show">应援</button>
<button @click="stop">暂停</button>
<h3 v-text="message"></h3>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"阿中阿中勇敢飞，中华儿女永相随~~~",
timer:null //在data上定义定时器timer，默认为null
},
methods:{
show(){
if(this.timer != null) return;
this.timer = setInterval(() => {
//获取到头的第一个字符
let start = this.message.substring(0,1);
//获取到后面的所有字符
let end = this.message.substring(1);
//重新拼接得到新的字符串，并赋值给this.message
this.message = end + start;
},300)
},
stop(){
//清除定时器
clearInterval(this.timer)
//清除定时器之后，需要重新将定时器置为null
this.timer = null
}
}
})
</script>
</body>
</html>
vue实现跑马灯效果的更多相关文章
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 使用Vue做出跑马灯效果
<div id="pmd"> <h4> {{msg}}</h4> <input type="b ...
- vue文字跑马灯效果
https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...
- Vue学习笔记四：跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- vue学习第二天：Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
随机推荐
- GDB 调试指南
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复 「1024」 即可领取,欢迎大家关注,二维码文末可以扫. 00 介绍 ...
- [Link 2005]vs2015 LNK2005 "class std::basic_ostream<char,struct std::char_traits<char> > & __cdecl printR(class std::basic_ostream<char,struct std::char_traits<char> > &,class QueryResult const &)" (?
vs2015 LNK2005 "class std::basic_ostream<char,struct std::char_traits<char> > &am ...
- asp.net core mvc 之 DynamicApi
这段时间闲赋在家,感觉手痒,故想折腾一些东西. 由于之前移植了一个c#版本的spring cloud feign客户端(https://github.com/daixinkai/feign.net), ...
- hadoop之mapreduce详解（基础篇）
本篇文章主要从mapreduce运行作业的过程,shuffle,以及mapreduce作业失败的容错几个方面进行详解. 一.mapreduce作业运行过程 1.1.mapreduce介绍 MapRed ...
- 记一次jmeter从txt文本获取数值并给测试计划的变量赋值，jmeter永久性修改变量。
前言: 需要永久性的改变变量. 其实这个办法并不是最好的,但是是最容易实现的.后期可做成从数据库里直接取值. 赋值BeanShell import java.io.File; import java. ...
- python库之turtle（图形绘制） 开启新的快乐源泉
相信有不少人学习python 都是听了老前辈的推荐 “学python好,python有趣的代码多” 比如说画一只小狮子 这就是今天想要介绍的绘制图形库-turtle 如果也想这样画一只小狮子,或者其他 ...
- 基于操作系统原理的Linux 系统的安装
一.实验目的 1．了解Linux操作系统的发行版本. 2．掌握Red Hat Linux 9.0的安装方法. (可用Red Hat Linux 5.0版本替代9.0版本) 3．了解Linux其他版本( ...
- 详解http报文
摘要 作为一个web开发者,每天都在使用者Http协议,却总是一知半解.本文参看Http RFC7230规范,梳理了http报文部分. http 报文构成 start-line: 起始行,描述请求或响 ...
- SpringBootSecurity学习（10）网页版登录之记住我功能
场景 很多登录都有记住我这个功能,在用户登陆一次以后,系统会记住用户一段时间,在这段时间,用户不用反复登陆就可以使用我们的系统.记住用户功能的基本原理如下图: 用户登录的时候,请求发送给过滤器User ...
- linux中将video转换成gif
我使用的机器是Linux mint 17,因为习惯了在linux中开发而有时候在写小demo的时候要带一些演示,虽然可以使用录屏也可以但是视屏演示这些小demo也不是特别的方便.之前一直在linux中 ...