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 指定是否获得焦点,跑马灯效果要求设置 ...
随机推荐
- PM意识升级2.0
上一篇<质量:“PM,你怎么可以放弃我?!”>,我们匡正了PM的一个意识:质量是PM的底线和目标,也算是PM意识升级的1.0.同时提出,只有“正确的做正确的事”才是保证质量,且成本相对最低 ...
- 一条查询sql的执行流程和底层原理
1.一条查询SQL执行流程图 2.查询SQL执行流程之发送SQL请求 (1)客户端按照Mysql通信协议将SQL发送到服务端,SQL到达服务端后,服务端会单起一个线程执行SQL. (2)执行时Mysq ...
- hbase 预分区与自动分区
我们知道,HBASE在创建表的时候,会自动为表分配一个Region,当一个Region过大达到默认的阈值时(默认10GB大小),HBase中该Region将会进行split,分裂为2个Region,以 ...
- djangorestframework+vue-cli+axios，为axios添加token作为headers踩坑记
情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...
- c/c++ 继承与多态 文本查询的小例子（智能指针版本）
为了更好的理解继承和多态,做一个文本查询的小例子. 接口类:Query有2个方法. eval:查询,返回查询结果类QueryResult rep:得到要查询的文本 客户端程序的使用方法: //查询包含 ...
- 对ES6的yield示例分析
近期ES6标准如火如荼的发展,其中主要还是各大浏览器的支持,最重要厂商支付宝,微信的支持,使得国内的发展也很迅猛. 这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知 ...
- UOJ #269. 【清华集训2016】如何优雅地求和
UOJ #269. [清华集训2016]如何优雅地求和 题目链接 给定一个\(m\)次多项式\(f(x)\)的\(m+1\)个点值:\(f(0)\)到\(f(m)\). 然后求: \[ Q(f,n,x ...
- [LeetCode] 20. 有效的括号
题目链接:https://leetcode-cn.com/problems/valid-parentheses/ 题目描述: 给定一个只包括 '(',')','{','}','[',']' 的字符串, ...
- 类String 初识
String类概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如 "abc" )都可以被看作是实现此类的实例.类 String 中包括用于检 ...
- Ubuntu下找不到ttyUSB*问题解决
一.硬件连接 确认Ubuntu对USB转串口设备的支持. 1.# lsmod | grep usbserial如果有usbserial,说明系统支持USB转串口. 如果没有,先安装ch340驱动或者c ...