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 指定是否获得焦点,跑马灯效果要求设置 ...
随机推荐
- XE5 搭建DataSnap服务
1 准备工作 1.1 环境准备 XE5或XE7,操作系统Windows7(64位)操作系统. 数据库MSSQL选择SQLServer2008. 如果数据库服务没有在开发电脑上,则需要在开发电脑上安 ...
- SQL Server中将多行数据拼接为一行数据（一个字符串）
表A中id与表B中aid为一对多的关系 例如: 表A: id name a1 tom a2 lily a3 lucy 表B: id aid value b1 a1 B1 b2 a1 B2 b3 a2 ...
- RabbitMQ框架构建系列（一）——AMPQ协议
一.MQ 在介绍RabbitMq之前,先来说一下MQ.什么是MQ?MQ全称为Message Queue即消息队列,就是一个消息的容器, MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入 ...
- storm ui 网页一直出现提示loading summary
在更换了一次storm的版本之后:访问 http://mini1:8080/index.html 来查看storm的运行情况,但是出现了网页一直出现提示loading summary,但是通过透明的弹 ...
- docker 不能访问外网
如果之前docker能访问外网,现在不能访问, 同时宿主机可以访问外网,那就重启docker.
- 算法学习之BFS、DFS入门
算法学习之BFS.DFS入门 0x1 问题描述 迷宫的最短路径 给定一个大小为N*M的迷宫.迷宫由通道和墙壁组成,每一步可以向相邻的上下左右四格的通道移动.请求出从起点到终点所需的最小步数.如果不能到 ...
- python day06
深浅拷贝 1.值拷贝 ls1 = [1,2,3] ls2 = ls1 #ls2直接把栈区里ls1存的地址拿过来,也指向堆区里列表的id #原列表发生ls1改变(不是重新赋值),ls2也跟着发生改变 2 ...
- 我对DFS的理解
我对DFS的理解 [何为DFS] 深度优先搜索(Depth-First-Search),简称DFS.是一种常见搜索算法.其方法是从原点不断一条路扩散,当无路可走时回退来走下一条路,直至找到目标或遍历. ...
- [转帖]""(双引号) 与''(单引号) 差在哪？
""(双引号) 与''(单引号) 差在哪? http://wiki.jikexueyuan.com/project/13-questions-of-shell/double-sin ...
- jQuery 模拟操作
1.常用模拟 有时,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发 click 事件,而不需要用户去主动单击.在 jQuery 中,可以使用 trigger() 方法完成模拟操作 ...