vue.js（4）--字符串跑马灯
制作一个字符串的跑马灯效果
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串的跑马灯效果</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
<h1 v-text='msg'></h1>
<input type="button" value="走你" @click="go">
<input type="button" value="停" @click="stop">
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
msg:'习得前端妙，抱得美人归！',
timer:null
},
methods:{
go() {
// clearInterval(timer);
if(this.timer != null){
return;
} //使用if判断定时器状态，解决重复开启定时器的bug。
this.timer=setInterval(() => { //箭头函数解决this指向问题，箭头函数内部的this相对于外部this的指向。
// console.log(this.msg)需要访问data中数据时，一定要使用this，比如this.msg
var firstStr=this.msg.substring(0,1);
var lastStr=this.msg.substring(1);//截取函数的使用
this.msg=lastStr+firstStr;
},400)
},
stop(){
clearInterval(this.timer);
this.timer=null;
}
}
})
</script>
</body>
</html>
（2）摘要
实现案例的基本思路是利用substring截取字符串再进行拼接，然后使用定时器来达到动态的效果。
箭头函数可以解决this的指向问题，箭头函数内部的this相对于外部this的指向。
需要访问data中数据时，一定要使用this访问，比如this.msg this.timer。
注意substring（）函数的使用，substring（0,1）表示从0开始截取1位字符，substring（1）表示从1开始截取到最后。
vue.js（4）--字符串跑马灯的更多相关文章
- js抽奖，跑马灯
分享自己写的跑马灯抽奖. HTML代码 <!--首先将一个div的背景设为一个圆形--> <div style=" width:240px; height:232px; b ...
- js无缝滚动跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
- vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JS实现跑马灯效果(向左，向上)
<html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...
- table数据跑马灯效果
1.使用marquee标签实现普通文本字符串跑马灯效果. <marquee behavior="scroll" scrollamount="3" styl ...
- 使用vue.js封装一个包含图片的跑马灯组件
初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...
- Vue学习笔记四：跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
随机推荐
- 实现shape图层添加label
void CmapwingisTest2View::OnToolsAdd32780() { TCHAR szFilters[]= _T("SHP Files (*.shp)|*.shp||& ...
- HashMap如何实现序列化
/** * Save the state of the <tt>HashMap</tt> instance to a stream (i.e., * serialize it) ...
- 笔记本电脑如何同时上内外网（通过usb外接网卡实现虚拟机连外网）
我们这里达成的方式不是内外网切换,而是真正意义上的同时上内网和外网 原理: 通过构建虚拟机,利用usb外接网卡(某宝某东都有售,价格在50大洋左右)使虚机连接外网,然后开启虚拟机的unity模式 准备 ...
- 【Spark机器学习速成宝典】模型篇06随机森林【Random Forests】（Python版）
目录 随机森林原理 随机森林代码(Spark Python) 随机森林原理 参考:http://www.cnblogs.com/itmorn/p/8269334.html 返回目录 随机森林代码(Sp ...
- java.sql.SQLSyntaxErrorException: ORA-01795: 列表中的最大表达式数为 1000
后台报了一些异常日志,查阅后发现在 oracle 数据库中使用 in 关键字条件不能超过 1000 个,当时写查询语句时没有关注这个问题 总结一下解决方法 1.分多次查询,对查询要求不高的话.把入参的 ...
- RN的win7开发环境部署和问题解决
1安装node,配置环境变量 2.安装Android studioe,配置环境变量 3.安装python2 注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x) ...
- 阶段3 2.Spring_08.面向切面编程 AOP_4 spring基于XML的AOP-配置步骤
resources下新建bean.xml文件 xmlns:aop 先配置IOC aop 通知类就是logger.id配置为logAdvice表示日志的通知 梳理流程 首先我们在这有个Service它需 ...
- Linux下源码安装MySQL-5.6.25
从mysql-5.5起,mysql源码安装开始使用cmake了,因此我们得先安装cmake,配置安装目录./configure --perfix=/.....的时候和以前的会有些区别. 一.安装cma ...
- Kubernetes 中文文档
Kubernetes 中文文档 如果想学习 Kubernetes 的小伙伴,可以参考如下文档学习: https://www.kubernetes.org.cn/docs 文档中详细讲解了 k8s 的设 ...
- Java基础面试题集（二）
Java程序员面试题集(1-50) 一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象 ...