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后面所有的字 ...
随机推荐
- 关于MySQL 处理重复数据
统计重复数据 以下我们将统计表中 first_name 和 last_name的重复记录数: mysql> SELECT COUNT(*) as repetitions, last_name, ...
- MariaDB 默认是禁止远程访问的 我们改掉它
查询用户账号信息: select User, host from mysql.user; 现在只显示 root账户中的host项是localhost表示该账号只能进行本地登录,我们需要修改权限,输入 ...
- Docker入门-构建第一个Java程序
定制镜像 准备一个没有第三方依赖的java web项目,可能参考示例maven结构项目: session-web.war 把该war上传到安装有docker软件的服务器上宿主目录下.在同级目录创建Do ...
- Jmeter性能测试环境搭建（Windows下）
最近刚开始接触Jmeter性能测试,现总结环境搭建如下: 一.windows安装JDK步骤与环境变量配置: 1.先将下载的JDK安装到其默认目录:C:\Program Files\Java\jdk1. ...
- vue组件化之模板优化及注册组件语法糖
vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...
- SpringMvc中@PathVariable注解简单的用法
@PathVariable /** * @PathVariable 可以来映射 URL 中的占位符到目标方法的参数中. * @param id * @return */ jsp页面请求 <a h ...
- DeepFaceLab：手动提取高精度脸图，减少抖动！
DeepFaceLab默认情况下都都是自动提取脸部,整体来说效果不错,脸部曲线识别度也比较高.但是自动不是万能的,有些图片的轮廓识别并不好.而识别不好最直接的结果就是合成的视频可能会出现抖动. 也就是 ...
- 阶段3 2.Spring_08.面向切面编程 AOP_10 总结和作业安排
由转账添加事物,使得我们的操作变的非常麻烦.重复代码产生了很多 实际的开发中如果想记录日志每个方法都要执行 如果判断用户是否登陆也是每个方法都需要判断 这些重复的代码我们都需要去解决. 解决的方式,以 ...
- I/O检测介绍
I/O性能监测可总结如下:* 任何时间出现CPU等待IO,说明磁盘超载.* 计算出你的磁盘可维持的IOPS值.* 判定你的应用是属于随机磁盘访问型还是有序型.* 通过对比等待时间和服务时间即可判断磁盘 ...
- 微信小程序---交互反馈
1.学习大纲: 2.showToast(): wx.showToast({ title: '成功', icon: 'success', duration: }) 3.hieToast(): wx.sh ...