Vue学习笔记四：跑马灯效果
跑马灯原理
先讲讲跑马灯的原理，就是一行字，会滚动，思路是这样的，使用substring方法，一个获取字符串的第一个字，一个获取1后面所有的字，然后后+前就可以了
HTML
如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
</head>
<body>
<!-- 这个div就是MVVM中的V，View -->
<div id="app">
<input type="button" value="跑马灯" :title="pao" @click="startpmd"></input>
<input type="button" value="暂停" :title="stop" @click="stoppmd"></input>
<h3>{{ msg }}</h3>
</div>
<script>
// 这个vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M，Model
data: {
msg:"大家好，我是Vae，这是我即将发表的首张独创专辑自定义",
pao:"开启跑马灯效果",
stop:"暂停跑马灯效果",
intervalid:null
},
methods: {
startpmd(){
if(this.intervalid!=null) return;
this.intervalid = setInterval(() => {
var start=this.msg.substring(0,1)
var end=this.msg.substring(1)
this.msg=end+start
},200)
},
stoppmd(){
clearInterval(this.intervalid)
this.intervalid=null
}
}
})
</script>
</body>
</html>
讲解一下，新学了一些知识
箭头函数
这个箭头函数的作用就是让函数内部的this等于外部的this，如果不使用箭头函数，就会出现this不一致的问题
计时器
setInterval是计时器开启的方法，用法就是setInterval(方法，时间)
clearInterval是清除计时器的方法，用法就是clearInterval(计时器)
就这两个知识点是新学的，其他的都没什么
跑马灯效果
可以自己测试一下，我就不截动态图了，麻烦
防盗链接：本博客由蜀云泉发表
Vue学习笔记四：跑马灯效果的更多相关文章
- Android学习总结——TextView跑马灯效果
Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...
- Android 开发笔记___textvieww__跑马灯效果
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- VUE 学习笔记 四 计算属性和监听器
1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- vue学习第二天：Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
- TextView的跑马灯效果（AS开发实战第二章学习笔记）
TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...
随机推荐
- spring boot整合Hadoop
最近需要用spring boot + mybatis整合hadoop,其中也有碰到一些坑,记录下来方便后面的人少走些弯路. 背景呢是因为需要在 web 中上传文件到 hdfs ,所以需要在spring ...
- PM意识升级2.0
上一篇<质量:“PM,你怎么可以放弃我?!”>,我们匡正了PM的一个意识:质量是PM的底线和目标,也算是PM意识升级的1.0.同时提出,只有“正确的做正确的事”才是保证质量,且成本相对最低 ...
- docker部署postgresql时，data目录不生效的问题探究
今天用docker部署postgresql,用的是官方的镜像.结果挂载完 /var/lib/postgresql/data目录后,和容器里的目录其实并没有挂载成功. 母机上的目录并没有成功挂载到容器里 ...
- powershell-将powershell脚本排到JOB
Program/script下填写“Powershell”,表示这个脚本会在powershell环境下运行 Add arguments(optional)填写脚本绝对路径名称 Start in(Opt ...
- Extjs renderer函数
昨天提到了改变grid中 行的背景颜色,其实还有一个更简单的方法,就是利用renderer:function(){}函数 renderer 函数是一个拦截者模式,用于改变渲染到单元格的值和样式. re ...
- 解决CSDN需要登录才能看全文
本来今天学习遇到一些问题,在网上翻着博客,突然在csdn里就提示要登录才能看全文. 看了下页面源码博客内容已经拿到本地了,只是加了一层罩,也是挺无语的,暂时先用这种方法解决吧: (function() ...
- 好程序员web前端分享想要学习前端需要学那些课程
好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...
- Oracle 11g全表扫描以Direct Path Read方式执行
在Oracle Database 11g中有一个新特性,全表扫描可以通过直接路径读的方式来执行(Direct Path Read),这是一个合理的变化,如果全表扫描的大量数据读取是偶发性的,则直接路径 ...
- Linux内存管理专题
Linux的内存管理涉及到的内容非常庞杂,而且与内核的方方面面耦合在一起,想要理解透彻非常困难. 在开始学习之前进行了一些准备工作<如何展开Linux Memory Management学习?& ...
- 【原创】谈谈线上CPU100%排查套路
引言 不知道在大家面试中,有没有遇到这个问题 生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题呢? 这个问题分为两版回答! 高调版 对不起,我是做研发的,这个问 ...