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 指定是否获得焦点,跑马灯效果要求设置 ...
随机推荐
- C#隐式转换与显示转换
System.Objec时C#中所有类型的基类,也就是万类之源. 一.值类型 值类型都继承自System.ValueType(派生自System.Objec),继承自System.ValueType的 ...
- sqlserver数据库NULL类型注意事项
1,变量NULL类型赋值需要初始化 2,判断条件
- Powershell-获取MAC地址对应IP信息
因业务需要在DHCP服务器上绑定设备MAC,提示"指定的IP地址或硬件地址正被其他客户端使用",与业务同事沟通之前该设备做过地址保留,具体对应地址遗忘了. 问题描述: a.按照用户 ...
- Loj #3089. 「BJOI2019」奥术神杖
Loj #3089. 「BJOI2019」奥术神杖 题目描述 Bezorath 大陆抵抗地灾军团入侵的战争进入了僵持的阶段,世世代代生活在 Bezorath 这片大陆的精灵们开始寻找远古时代诸神遗留的 ...
- 从Linux 与 Unix 异同，看开源世界的发展！
从Linux 与 Unix 异同,看开源世界的发展! 如果你是一名20多岁或30多岁的软件开发人员,那么你已成长在一个由Linux主导的世界中.数十年来,它一直是数据中心的重要参与者,尽管很难找到明确 ...
- [认证授权] 5.OIDC（OpenId Connect）身份认证（扩展部分）
在上一篇[认证授权] 4.OIDC(OpenId Connect)身份认证(核心部分)中解释了OIDC的核心部分的功能,即OIDC如何提供id token来用于认证.由于OIDC是一个协议族,如果只是 ...
- mange
from flask import Flask app = Flask(__name__) manager = Manager(app) 1. 重写Command class ShellCommand ...
- 接口（迭代器） Iterator
Iterator接口简介 在程序开发中,经常需要遍历集合中的所有元素.针对这种需求,JDK专门提供了一个接口java.util.Iterator.Iterator接口也是Java集合中的一员,但它与C ...
- OpenStack之Fuel架构及其工作原理
一.Fuel架构 Fuel是一个开源的OpenStack部署和管理的工具,它允许用户通过Web UI进行OpenStack的部署和管理,并可以通过插件来扩展. Fuel的目标:加快和简化不同配置的 ...
- 【算法】深度优先 马走日 Hamilton routes
在n*m的棋盘中,马只能走“日” 字.马从位置(x,y)处出发,把棋盘的每一格都走一次,且只走一次.找出所有路径. ××××××××××××× 类似问题: 在半个中国象棋棋盘上,马在左下角(1,1)处 ...