vue实现跑马灯效果为阿中哥哥应援

1、效果图

2、实现代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跑马灯</title>

    <!-- 引入vue.js-->

    <script src="./lib/vue.js"></script>

</head>

<body>

<div id="app">

    <button @click="show">应援</button>

    <button @click="stop">暂停</button>

    <h3 v-text="message"></h3>

</div>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            message:"阿中阿中勇敢飞，中华儿女永相随~~~",

            timer:null //在data上定义定时器timer，默认为null

        },

        methods:{

            show(){

                if(this.timer != null) return;

                this.timer = setInterval(() => {

                    //获取到头的第一个字符

                    let start = this.message.substring(0,1);

                    //获取到后面的所有字符

                    let end = this.message.substring(1);

                    //重新拼接得到新的字符串，并赋值给this.message

                    this.message = end + start;

                },300)

            },

            stop(){

                //清除定时器

                clearInterval(this.timer)

                //清除定时器之后，需要重新将定时器置为null

                this.timer = null

            }

        }

    })

</script>

</body>

</html>

vue实现跑马灯效果的更多相关文章

  1. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  2. 使用Vue做出跑马灯效果

     <div id="pmd">         <h4> {{msg}}</h4>         <input type="b ...

  3. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  4. Vue学习笔记四：跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  5. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

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

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

  7. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  8. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  9. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

随机推荐

  1. 使用PrepareStatement

    包结构: 第一步:编写获取连接工具类 package com.atguigu.jdbc; import java.io.IOException; import java.io.InputStream; ...

  2. C++基础之动态内存

    C++支持动态分配对象,它的生命周期与它们在哪里创建无关,只有当显示的被释放时,这些对象才会被销毁.分配在静态或栈内存中的对象由编译器自动创建和销毁. new在动态内存中为对象分配空间并返回一个指向该 ...

  3. 客户端与服务端的事件watcher源码阅读

    watcher存在的必要性 举个特容易懂的例子: 假如我的项目是基于dubbo+zookeeper搭建的分布式项目, 我有三个功能相同的服务提供者,用zookeeper当成注册中心,我的三个项目得注册 ...

  4. SpringSecurity原理剖析与权限系统设计

    Spring Secutity和Apache Shiro是Java领域的两大主流开源安全框架,也是权限系统设计的主要技术选型.本文主要介绍Spring Secutity的实现原理,并基于Spring ...

  5. Google AppCrawler初探

    AppCrawler是什么 你可以把它想成类似monkey一样的工具,调起你的应用程序并执行各种动作(点击,输入,滑动等)来通过这种方式 来查看各种情况下应用程序的状态 官方文档链接:AppCrawl ...

  6. jedis指定数据库

    正常情况下,我们通过get或者set方法是从db0中取数据. 1.redis提供了 select命令,可以通过select index 这个指令,将数据库切换到index所在的那个数据库上 2.jed ...

  7. java多线程技术核心

    1.进程的三大特征: 独立性:拥有自己的独立的地址空间,一个进程不可以直接去访问其他进程的地址空间. 动态性:是一个系统中活动的指令的集合. 并发性:单个进程可以在多个处理器上并发进行,互不影响. 2 ...

  8. IDEA 学习笔记之 Java项目开发深入学习（2）

    Java项目开发深入学习(2): 查找变量被用到的地方 编译当前文件 增加变量watch 注意:我使用了keymap (eclipse模板),所以很多快捷键和eclipse一样. F5单步调试进入函数 ...

  9. 在Xamarin开发中，UWP环境下无法进入断点调试standard库的问题解决方案

    环境如下 选择的代码共享方案为standard模式 再多平台依赖注入的时候,断点一直提示没有加载文档. 进入到目标平台项目Debug文件夹下,查看.发现standard库引用进来后,对应的*.pdb文 ...

  10. JDK1.7中HashMap死环问题及JDK1.8中对HashMap的优化源码详解

    一.JDK1.7中HashMap扩容死锁问题 我们首先来看一下JDK1.7中put方法的源码 我们打开addEntry方法如下,它会判断数组当前容量是否已经超过的阈值,例如假设当前的数组容量是16,加 ...