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后面所有的字 ...
随机推荐
- openssl生成秘钥对
openssl genrsa -out pri.pem openssl rsa -in pri.pem -out pub.pem -pubout 这样就生成秘钥对了,其中pri.pem是私钥,pub. ...
- Linux高级调试与优化——用户态堆
内存问题是软件世界的住房问题 嵌入式Linux系统中,物理内存资源通常比较紧张,而不同的进程可能不停地分配和释放不同大小的内存,因此需要一套高效的内存管理机制. 内存管理可以分为三个层次,自底向上分别 ...
- Android之View的绘制流程
本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定实现细 ...
- day8_文件操作及编码解码
一.文件操作基本流程 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所 ...
- 职位-IT：软件设计师
ylbtech-职位-IT:软件设计师 软件设计师是指能根据软件开发项目管理和软件工程的要求,按照系统总体设计规格说明书进行软件设计,编写程序设计规格说明书等相应的文档的实用性人才.还能够组织和指导程 ...
- MySQL 树形结构 根据指定节点 获取其所在全路径节点序列
背景说明 需求:MySQL树形结构, 根据指定的节点,获取其所在全路径节点序列. 问题分析 1.可以使用类似Java这种面向对象的语言,对节点集合进行逻辑处理,获取全路径节点序列. 2.直接自定义My ...
- HTTP Status 500 ? Internal Server Error
getWriter()和getOutputStream()不能同时调用 HTTP Status 500 ? Internal Server Error Type Exception Report Me ...
- 【VS开发】【智能语音处理】Windows下麦克风语音采集
简介 这是我很早以前的大学毕业设计,忽然间找到贴出来以纪念自己的纯真年代...但是因为CSDN不给面子所以导致短短的一篇文章贴了足足7次..他老提时说文章超过了64K,老大,拜托,那是算上了里面的图片 ...
- docker安装详解
系统要求 64位操作系统 Linux kernel大于等于3.10 CentOS 7以及以上版本 yum安装 移除旧版本docker信息 # yum -y remove docker docker-c ...
- CentOS7之ssh-Xshell密钥认证登陆
操作系统版本:CentOS Linux release 7.2.1511 (Core) SSH版本:OpenSSH_6.6.1p1, OpenSSL 1.0.1e-fips 1.打开Xshell工 ...