<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. ThreadLocal源码解析-Java8

    目录 一.ThreadLocal介绍 1.1 ThreadLocal的功能 1.2 ThreadLocal使用示例 二.源码分析-ThreadLocal 2.1 ThreadLocal的类层级关系 2 ...

  2. fiddler修改请求参数

    1.打开fiddler ,点击界面左侧左侧底部 2.此图标为before request请求(修改请求参数时,设置这个,可以修改请求参数) 3..再次点击该按钮,将图标切换到下图after respo ...

  3. macos的两个快捷键和一个小tip

    学校的linux协会介绍了一个免费的light轻量级加速器,昨天晚上十点左右的时候着手研究,发现其实就是一个代理服务器.在配置这个代理服务器的时候碰到了一些困难并最终都解决了.下面记录一下配置过程学到 ...

  4. Android开发学习笔记DDMS的使用

    打开DDMS DDMS 的全称是Dalvik Debug Monitor Service,是 Android 开发环境中的Dalvik虚拟机调试监控服务. DDMS里面包含了:Device(设备) F ...

  5. Day7-微信小程序实战-引入iconfont(充分利用iconfont图标库的资源)

    一.引入iconfont 首先在iconfont.com中注册登陆: 点击上方[图标管理]并进入我的项目 注意:如果没有项目的话,就点击右边的来创建项目 在官网中找到想要的图标之后,以SVG的形式下载 ...

  6. 手把手教你利用Docker+jenkins部署你的网站

    更新服务器的安装源为阿里的源,参考链接:https://blog.csdn.net/js_xh/article/details/79166655 安装docker; 1 更新资源 sudo apt-g ...

  7. react 的一个插件

    Reactjs code snippets  (vs code  编辑器里面的一个插件    支持 react 得简写) rcc     和 rfc    可以快速生成react代码 下面网址是个re ...

  8. 容器中的Java堆大小调整:快速,轻松

    在上一篇博客中,我们已经看到Java进行了改进,可以根据正在运行的环境(即物理机或容器(码头工人))识别内存.java的最初问题是,它无法弄清楚它是否在容器中运行,并且它曾经为容器运行所在的整个硬件捕 ...

  9. 查找nginx安装目录并启动

    今天公司突然停电,来电后发现服务无法访问了,服务器是部署在公司内 发现ip ping 不通,是服务器没开 手动开了服务器,还是无法访问 可以FTP,但是不能访问服务,说明机器已经开了,有些东西应该没启 ...

  10. xutils工具上传日志文件

    首先下载xutils java包: 添加到项目的工程中: 第二在新建一个类继承application package logback.ecmapplication.cetcs.com.myapplic ...