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. 41 (OC)* OC的理解与动态特性

    1:动态类型(Dynamic typing),动态绑定(Dynamic binding)和动态加载(Dynamic loading). 动态类型:即运行时再决定对象的类型.简单说就是id类型.id类型 ...

  2. IDEA远程debug线上项目(实操版)

    # 1.在服务器上 tomcat 的 bin目录下找到并打开 catalina.sh 在文件中搜索: ``` JPDA_ADDRESS= ``` 找一个服务器上没有被使用的端口,填入,如50005,保 ...

  3. [VB.NET Tips]字符串连接

    在很多应用场景下我们都需要对字符串进行拼接操作. 在每一次连接字符串时,都要在堆上分配新的内存空间,每一个分配都有一定的消耗. 较长的字符串在堆中分配,对其进行连接操作需要花费很长的时间,先连接小的字 ...

  4. EditPlus 全系列 注册码

    EditPlus4注册码 注册名:host1991 序列号:14F50-CD5C8-E13DA-51100-BAFE6  注册名:360xw 注册码:93A52-85B80-A3308-BF130-4 ...

  5. C# 反射基础用法

    1.引用命名空间 using System.Reflection; 2.object[] parameters = { 参数 }; 调用方法的参数数组 3.Type t = Type.GetType( ...

  6. 搭建数据库galera集群

    galera集群 galera简介 galera集群又叫多主集群,用于数据库的同步,保证数据安全 最少3台,最好是奇数台数,当一台机器宕掉时,因为仲裁机制,这台机器就会被踢出集群. 通过wsrep协议 ...

  7. 在vue中使用[provide/inject]实现页面reload

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...

  8. spring后台重定向方式

    1.直接返回值中加重定向:"redirect:要访问的网址"; public String updateOrAddProject() { return "redirect ...

  9. 基于hap的文件上传和下载

    序言 现在,绝大部分的应用程序在很多的情况下都需要使用到文件上传与下载的功能,在本文中结合hap利用spirng mvc实现文件的上传和下载,包括上传下载图片.上传下载文档.前端所使用的技术不限,本文 ...

  10. 使用scm-manager搭建git/svn 代码管理仓库

    使用 scm-manager 搭建 git/svn 代码管理仓库 1.在官网上下载scm-manager 下载地址https://www.scm-manager.org/download/ 2. 配置 ...