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后面所有的字 ...
随机推荐
- 自动化部署脚本之windows上执行批处理文件
windows .bat 批处理 脚本路径如下: install-simo.bat文件内容: @ECHO OFF set scriptpath=%~dp0set logfile=%scriptpa ...
- 对于Java培训出身的同学，接下来该怎么学习技术？
首先恭喜从培训班出来找到工作的同学,确实挺不容易的,4个月的培训,每天从早上9点到晚上9点,也是996,主要的活动地方就是宿舍和教室, 让我现在也去培训,我估计还熬不下来. 尤其是对于从小白开始的同学 ...
- 关于虚拟机中Linux系统无法上网之后的解决方案
我刚刚安装好虚拟机上的Linux的时候,宿主机网络正常,但虚拟机中虽然显示网络连接正常,但无法上网,因此我打开了网络设置 这是默认设置,但上不了网,而按照网上的查找结果,选择NAT是没错的,但仅限于w ...
- 数据库 mysql 操作
安装好xammp,打开阿帕奇和数据库服务: 点击右侧 shell 按钮,进入命令行: 首先,利用超级管理员权限进入数据库: mysql -uroot -p enter,再enter 把下述代码复制进命 ...
- ajax 调用 webService
前台脚本<script type="text/javascript"> $(function () { $.ajax({ type: "POST", ...
- JavaScript_AMD规范
JavaScript_AMD规范 一.总结 一句话总结: Asynchronous Module Definition:AMD是"Asynchronous Module Definition ...
- visual studio运行时库MT、MTd、MD、MDd
在开发window程序是经常会遇到编译好好的程序拿到另一台机器上面无法运行的情况,这一般是由于另一台机器上面没有安装响应的运行时库导致的,那么这个与编译选项MT.MTd.MD.MDd有什么关系呢?这是 ...
- 短信验证码api
最近遇到的项目需要个随机短信验证码实现注册用户 选用的是“云信使”,因为有15条免费的测试短信可以验证代码是否正确调用该短信api 地址 进入短信平台 一.实名认证 + 短信模板 用户认证完成后,创建 ...
- ARM汇编指令特点
根据朱有鹏老师课程笔记整理而来: (汇编)指令是CPU机器指令的助记符,经过编译后会得到一串1 0组成的机器码,由CPU读取执行. (汇编)伪指令本质上不是指令(只是和指令一起写在代码中),它是编译器 ...
- 【计算机视觉】ViBe - a powerful technique for background detection and subtraction in video sequences
转自:http://blog.csdn.net/stellar0/article/details/8777283 作者:星zai ViBe算法:ViBe - a powerful technique ...