<!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. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

  2. Proj.Net 投影介绍

    Proj.Net是开源地图投影库Proj.4的.net版本,许多GIS开源软件的投影都直接或间接地使用Proj.4的库,Proj.4是用C语言编写..Net下的开源GIS项目NetTopologySu ...

  3. C#中关于表达式与委托在EF中的不同表现总结

    Func<Invoice, bool> func = x => x.State == InvoiceState.Created; Expression<Func<Invo ...

  4. 关于web资金系统提现安全保护,防止极快的重复并发请求导致重复提现的解决思路

    关于WEB金融系统中的提现安全问题很多人没有深入思想,导致有漏洞,常常会遇到有些人遇到被攻击到导资金损失的麻烦,     其实要彻底解决重复并发请求 导致重复提现问题,是需要花点心思的,并没有看起来的 ...

  5. 【原】无脑操作：Centos 7后台运行及终止jar包程序

    1.后台运行jar包程序,输入:nohup java -jar /路径/程序.jar & 2.后台终止jar包程序,输入:ps -ef | grep java,查看使用java命令的进程,再输 ...

  6. 接触新的项目，构建时候报错:Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in

    详细信息如下: Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in http:// ...

  7. 使用CAS实现无锁列队-链表

    #include <stdlib.h> #include <stdio.h> #include <pthread.h> #include <iostream& ...

  8. V8引擎的垃圾回收策略

    V8 的垃圾回收策略主要基于分代式垃圾回收机制.所谓分代式,就是将内存空间分为新生代和老生代两种,然后采用不同的回收算法进行回收. 新生代空间 新生代空间中的对象为存活时间较短的对象,大多数的对象被分 ...

  9. 初试PySnooper

    Pysooper是什么? 我们写代码会经常出现bug,有的人会使用断点调试器,但是设置这样的断点调试器是花时间的. 所以很多人会在可能出现错误的地方print打印来输出语句. Pysooper的作用有 ...

  10. 【Git之旅】2.Git对象

    1.块(blob)对象 (1)文件的每一个版本表示为一个块 (2)二进制大对象(binary large object)的缩写,是计算机领域的常用术语,用来指代某些可以包含任意数据的变量或文件,同时其 ...