跑马灯原理

先讲讲跑马灯的原理，就是一行字，会滚动，思路是这样的，使用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学习笔记四：跑马灯效果的更多相关文章

  1. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

  2. Android 开发笔记___textvieww__跑马灯效果

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  4. vue制作滚动条幅-跑马灯效果实例代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. VUE 学习笔记 四 计算属性和监听器

    1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...

  6. 第二章 Vue快速入门--10-11 跑马灯效果制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  8. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  9. TextView的跑马灯效果（AS开发实战第二章学习笔记）

    TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...

随机推荐

  1. selenium-测试框架搭建(十三)

    思路 分离业务代码和测试数据,提高代码可维护性,实现自动化,减少重复劳动. 一个测试框架大概由配置文件,测试数据,测试用例,相关文件(发送邮件等),测试日志,断言和测试报告等模块组成. 结构 以页面为 ...

  2. Neo4j 全文检索

    全文检索基本概念 搜索 搜索这个行为是用户与搜索引擎的一次交互过程,用户需要找一些数据,他提供给搜索引擎一些约束条件.搜索引擎通过约束条件抽取一些结果给用户 搜索引擎 搜索引擎存在的目的是存储,查找和 ...

  3. 《SQL CookBook 》笔记-第一章-检索记录

    目录 第一章 检索记录 1.1检索所有行和列 1.2筛选行 1.3查找满足多个查询条件的行 1.4筛选列 1.5创建列的别名 1.6 在where子句中引用别名列 1.7 串联多列的值 1.8 在se ...

  4. Python编写的Linux邮件发送工具

    之前有用过Linux自带的mail工具来定时发送邮件,但是要装mailx还有配mail.rc,这还比较正常,关键是到了ubantu下这工具用起来真是操蛋,如果哪天其他的unix like操作系统也有需 ...

  5. SQLServer之ISO游标使用

    什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...

  6. Swift 产生 uuid

    项目中.需要客户端生成一个唯一的识别码 let uuid = UUID().uuidString print(uuid)

  7. windows常用目录

    启动目录位置 %USERPROFILE%\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

  8. GL-inet路由器当主控制作WIFI视频小车

    以前也用单片机做过WIFI小车,但是单片机没有自带WIFI,仍然需要用到小路由器作为图传和控制信号传输.既然肯定要用到路由器,那何不直接用路由器作为主控呢,这样就省掉了单片机.这次作为主控的GL-in ...

  9. VMware Workstation14 安装Ubuntu18.04

    1 下载Vmware Workstations14破解版 百度网盘链接:https://pan.baidu.com/s/12yVxoPCJUAmdts4SUdzndg 提取码:bs0g 2 下载Ubu ...

  10. Servlet 易错点和注意点

    目录 @WebServlet("/")与@WebServlet("/*")的区别 @WebServlet("/")与@WebServlet( ...