跑马灯原理

先讲讲跑马灯的原理，就是一行字，会滚动，思路是这样的，使用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. 尝鲜Java 12新特性：switch表达式

    Java 12将在两个月后(2019/3/19)发布,现已进入RDP1阶段,确定加入8个JEP.其中对Java语法的改进是JEP 325: switch表达式.于是我迫不及待,提前感受一下更先进的语言 ...

  2. PHPstorm快捷键Ctrl + Alt + Left 或Right不起作用

    最近遇到一个问题,就是安装的phpstorm的回撤快捷键不起作用了,死活用不了!折磨了好久,终于找到解决方法了,具体请看我的github文章: 快捷键Ctrl + Alt + Left 或Right不 ...

  3. Neuroph开发过程

    文章提纲 安装与配置 开发小结 建立项目 配置项目 理解感知机的代码 安装与配置 JDK的安装:建议JRE 1.8以上: Neuroph安装:建议2.94的版本.下载地址 neuroph-core-2 ...

  4. 网页控制脚本修改系统信息 C语言调用uci

    0 交叉编译生成程序 http://tuntuntun.net/%E5%9C%A8OpenWrt%E4%B8%8A%E8%BF%90%E8%A1%8C%E7%AC%AC%E4%B8%80%E4%B8% ...

  5. libgdx学习记录2——文字显示BitmapFont

    libgdx对中文支持不是太好,主要通过Hireo和ttf字库两种方式实现.本文简单介绍最基本的bitmapfont的用法. 代码如下: package com.fxb.newtest; import ...

  6. DirectX11 With Windows SDK--10 摄像机类

    前言 DirectX11 With Windows SDK完整目录:http://www.cnblogs.com/X-Jun/p/9028764.html 由于考虑后续的项目需要有一个比较好的演示环境 ...

  7. 《你必须掌握的Entity Framework 6.x与Core 2.0》勘误

    第5章 5.1.1----致谢网友[宪煌] public virtual ICollection Post {get;set;} 修改为 public virtual ICollection<P ...

  8. tps 和 qps的区别

    QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准. TPS:是Transactions ...

  9. CRT工具远程登陆Google Cloud远程ssh登录方法

    首先使用Google Cloud SSH连接上去:1.切换到 rootsudo -i12.编辑ssh配置文件vi /etc/ssh/sshd_config13.修改以下内容即可PermitRootLo ...

  10. Leetcode 8 Two Pointers

    Two Pointers 1. 28. Implement strStr() 用 i 记录haystack偏移量,j 记录 needle 的偏移量. class Solution { public i ...