<!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. iOS----------面试常问

    1.valueForKey 和 valueForKeyPath的区别是什么?

  2. Windows 安装 Scoop

    Scoop介绍 scoop是Windows下的包管理工具 安装环境要求 1,操作环境:win10 2,确保你的 PowerShell 版本 >= 3. win7或许低于3,得升级.如何确认Pow ...

  3. CAP 2.5 版本中的新特性

    前言 首先,恭喜 CAP 已经成为 eShopOnContainers 官方推荐的生产环境可用的 EventBus 之一. 自从上次 CAP 2.4 版本发布 以来,已经过去了几个月的时间,关注的朋友 ...

  4. 开源：Taurus.MVC 框架 (已支持.NET Core)

    为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...

  5. 467. [leetcode] Unique Substrings in Wraparound String

    467. Unique Substrings in Wraparound String Implement atoi to convert a string to an integer. Hint: ...

  6. 一文让你明白Redis主从同步

    今天想和大家分享有关 Redis 主从同步(也称「复制」)的内容. 我们知道,当有多台 Redis 服务器时,肯定就有一台主服务器和多台从服务器.一般来说,主服务器进行写操作,从服务器进行读操作. 那 ...

  7. 消费阿里云日志服务SLS

    此文档只关心消费接入,不关心日志接入,只关心消费如何接入,可直接跳转到[sdk消费接入] SLS简介 日志服务: 日志服务(Log Service,简称 LOG)是针对日志类数据的一站式服务,在阿里巴 ...

  8. Docker & ASP.NET Core (1)：把代码连接到容器

    和这种蛋糕一样,Docker的容器和镜像也是使用类似的分层文件系统构建而成的. 这样做的好处就是可以节省硬盘空间,也利于复用等等.因为Docker基于镜像创建容器的时候,其镜像是共享的:而且镜像里面的 ...

  9. pip安装python库时使用国内镜像资源加速下载过程

    pip默认安装包是从网站https://pypi.org/simple下载,我们可以将其改成国内的镜像网站,加速下载过程,下面以安装numpy库为例: pip install -i https://p ...

  10. 基于Log4Net本地日志服务简单实现

    背景 项目开发中,我们或多或少会使用诸如NLog,Log4Net,Kafka+ELK等等日志套件: 基于关注点分离原则,业务开发的时候不应该关注日志具体实现:并且后续能方便切换其他日志套件: 这里先实 ...