<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <!-- @ 用于绑定事件 -->

        <input type="button" value="跑起来" @click="start">

        <input type="button" value="停下来" @click="stop">

        <!-- 插值表达式，展示data属性数据 -->

        <h3>{{ msg }}</h3>

    </div>

</body>

<script>

    let vm = new Vue({

        // 规定操作的前端元素，id值为app的元素

        el: '#app',

        data:{

            msg: '恕我直言，在座的各位都是垃圾...',

            //

            myInterval: null

        },

        methods:{

            start:function(){

                console.log('跑起来')

                if(this.myInterval){

                    return

                }

                // => 的作用，我还朦朦胧胧的，大概意思就是使下面的this能够访问上面的data中的数据

                this.myInterval = setInterval(() => {

                    // 绑定字符串中的第一个元素

                    let start = this.msg.substring(0, 1)

                    // 绑定字符串中除第一个元素外的其他元素

                    let end = this.msg.substring(1)

                    // 进行新的字符串拼接并赋值

                    this.msg = end + start

                }, 200)

            },

            stop(){

                console.log('停下来')

                // clearInterval 用来终止动作

                clearInterval(this.myInterval)

                this.myInterval = null

            }

        }

    })

</script>

</html>

Vue.js01：跑马灯效果的更多相关文章

  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做出跑马灯效果

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

  4. vue文字跑马灯效果

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

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

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

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

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

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

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

  8. TextView跑马灯效果

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

  9. Android_TextView之跑马灯效果

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

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

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

随机推荐

  1. github常见操作和常见错误！错误提示：fatal: remote origin already exist

    如果输入$ git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 提示出错信息:fatal: remote ...

  2. 数字信号处理专题（3）——FFT运算初探

    一.前言 FFT运算是目前最常用的信号频谱分析算法.在本科学习数字信号处理这门课时一直在想:学这些东西有啥用?公式推来推去的,有实用价值么?到了研究生后期才知道,广义上的数字信号处理无处不在:手机等各 ...

  3. JVM之垃圾收集器

    前一篇讲了垃圾收集算法--JVM之GC算法.垃圾收集算法——标记-清除算法.复制算法.标记-整理算法.分代收集算法,如果把它看作是方法论,那么下面说的就应该是内存回收的具体实现. 先看一下JVM中有哪 ...

  4. Android 音视频开发学习思路

    Android 音视频开发这块目前的确没有比较系统的教程或者书籍,网上的博客文章也都是比较零散的.只能通过一点点的学习和积累把这块的知识串联积累起来. 初级入门篇: Android 音视频开发(一) ...

  5. Pytorch系列教程-使用字符级RNN对姓名进行分类

    前言 本系列教程为pytorch官网文档翻译.本文对应官网地址:https://pytorch.org/tutorials/intermediate/char_rnn_classification_t ...

  6. Python爬虫10-页面解析数据提取思路方法与简单正则应用

    GitHub代码练习地址:正则1:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac15_RE1.py 正则2:match. ...

  7. Linux 使用 top 命令查看系统的运行情况

    top命令显示界面 top命令默认在一个特定间隔(3秒)后刷新显示.要手动刷新,用户可以输入回车或者空格. top - 18:32:45 up 230 days, 2:01, 1 user, load ...

  8. mybatis-generator ： 自动生成代码

    [参考文章]:mybatis generator自动生成代码时 只生成了insert 而没有其他 [参考文章]:Mybatis Generator最完整配置详解 1. pom <plugin&g ...

  9. java双重检测或枚举类实现线程安全单例(懒汉模式)

    双重检测实现 /** * 懒汉模式->双重同步锁单例模式 */ public class SingletonExample5 { private SingletonExample5() { } ...

  10. 【重学计算机】机组D5章：指令系统

    1. 指令系统基本概念 指令集:一台机器所有指令的集合.系列机(同一公司不同时期生产):兼容机(不同公司生产) 指令字长:指令中包含的二进制位数,有等长指令.变长指令. 指令分类 根据层次结构:高级. ...