<div id="pmd">
        <h4> {{msg}}</h4>
        <input type="button" value="动起来" @click="run">
        <input type="button" value="停下" @click="stop">
    </div>
    <script>
        var pmd = new Vue({
            el: '#pmd',
            data:{
                msg:'动起来吧!跑马灯~~!',
                IntervalId: null
            },
            methods:{
                run(){
                    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
                    }, 300)
            },
            stop(){
                clearInterval(this.IntervalId),
                this.IntervalId = null
            },
        }
        })
    </script>

使用Vue做出跑马灯效果的更多相关文章

  1. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

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

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

  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. Node.js 学习笔记(一)

    node.js说白了就是JavaScript. node.js的性能是php的86倍(大概). 在下载完后可以用命令行打开及运行.   什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留 ...

  2. Selenium和ChromeDriver的安装与配置

    安装安装selenium: win: pip install seleniumliunx: pip3 install selenium12安装ChromeDriver, 该工具供selenium使用C ...

  3. 一文读懂Redis的四种模式,单机、主从、哨兵、集群

    少点代码,多点头发 本文已经被GitHub收录,欢迎大家踊跃star 和 issues. https://github.com/midou-tech/articles 入职第一周,我被坑了 最近刚入职 ...

  4. BT.656视频信号解码

    BT.656视频信号解码   BT.656协议标准 ITU-R BT.601和ITU-R BT.656是ITU-R(国际电信联盟)制定的标准.严格来说ITU-R BT.656是ITU-R BT.601 ...

  5. cb41a_c++_STL_算法_填充新值fill_generate

    cb41a_c++_STL_算法_填充新值fill_generatefill(b,e,v)fill_n(b,n,v),填充n个vgenerate(b,e,p)generate_n(b,n,p) gen ...

  6. rest_framework django 简单使用(数据库创建数据, 覆盖数据, 其他的大同小异)

    事先说几个坑:数据库定义字段时候,不要定义name 要定义 username 首先, 定义model(简单定义) from django.db import models from django.co ...

  7. 甜咸粽子党大战,Python爬取淘宝上的粽子数据并进行分析

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 爬虫 爬取淘宝数据,本次采用的方法是:Selenium控制Chrome浏览 ...

  8. URL is not registered (Settings | Languages & Frameworks | Schemas and DTDs)

    File - Settings - Schemas and DTDS时,选中报错的地址,然后Ctrl+alt+s打开设置(或者右键 -> setting)找到 把报错的地址填入就可以了,最后应用 ...

  9. android异步任务asyncTask详细分析

    android中的耗时操作需要放在子线程中去执行 asynctask是对Handler和和线程池的封装,直接使用比THread效率更加的高效因为封装了线程池,比我们每次直接new Thread效率更高 ...

  10. pythonic context manager知多少

    Context Managers 是我最喜欢的 python feature 之一,在恰当的时机使用 context manager 使代码更加简洁.清晰,更加安全,复用性更好,更加 pythonic ...