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 指定是否获得焦点,跑马灯效果要求设置 ...
随机推荐
- STL源码剖析-vector
STL(Standard Template Library) C++标准模板库,acm选手一定对它不陌生,除了算法,那几乎是“吃饭的家伙了”.我们使用库函数非常方便,且非常高效(相对于自己实现来说). ...
- Python正则表达式很难？一篇文章搞定他，不是我吹！
1. 正则表达式语法 1.1 字符与字符类 1 特殊字符:.^$?+*{}| 以上特殊字符要想使用字面值,必须使用进行转义 2 字符类 1. 包含在[]中的一个或者多个字符被称为字符类,字符类在匹配时 ...
- 关于Java 中跳出多重循环
前言 环境:window10 JDK 1.8 应用场景:在多个for循环或while循环中,直接跳到最外层的循环外面,而不是需要层层退出来. 使用: 使用一个标签label(也可以是其他单词,不能是关 ...
- JS直接调用C#后台方法（ajax调用）
1. 先手动引用DLL或者通过NuGet查找引用,这里提供一个AjaxPro.2.dll的下载: 2. 之后的的过程不想写了,网上都大同小异的,直接参考以前大佬写的: AjaxPro2完整入门教程 总 ...
- js 学习之路9：运算符
1. 算数运算符 运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 ...
- Mysql5.6二进制包安装方法
1.Download MySQL Community Server 访问mysql官方网站转到下载页https://dev.mysql.com/downloads/mysql/5.6.html#dow ...
- C# -- 使用 Task 执行多线程任务
C# -- 使用 Task 执行多线程任务 1. 使用 Task 执行多线程任务 class Program { static void Main(string[] args) { Task task ...
- Win7/Win8.1升级Win10后屏幕一直闪烁怎么办？
有些用户在把Win7/Win8.1升级到Win10正式版后,发现屏幕一直不停闪烁,以至于无法正常使用.出现这种情况的原因可能有很多,微软社区的论坛审阅人Alex_Shen给出了一种解决方案:进入安全模 ...
- arts打卡 从排序数组中删除重复项
Algorithm 从排序数组中删除重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 ...
- MacOS 10.13.6 下装xcode 流程
1.最好先安装brew https://github.com/Homebrew/brew/releases 自动安装脚本 /usr/bin/ruby -e "$(curl -fsSL htt ...