<!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>

  <!-- 1. 导入Vue包 -->

  <script src="./lib/vue-2.4.0.js"></script>

  <style>

    #app{

      color: chartreuse;

      font-size: 20px;

      font-weight: normal;

      font-family: serif;

    }

  </style>

</head>

<body>

  <!-- 2. 创建一个要控制的区域 -->

  <div id="app">

    <input type="button" value="浪起来" @click="lang">

    <input type="button" value="低调" @click="stop">

    <h4>{{ msg }}</h4>

  </div>

  <script>

    // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象

    var vm = new Vue({

      el: '#app',

      data: {

        msg: '猥琐发育，别浪~~！',

        intervalId: null // 在data上定义 定时器Id

      },

      methods: {

        lang() {

          // console.log(this.msg)

          // 获取到头的第一个字符

          // this

          if (this.intervalId != null) return;

            // 这个接受定时器的ID用来停止

          this.intervalId = setInterval(() => {

            //截取字符串（开始的位置 截取的个数）

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

            // 获取到 后面的所有字符

            var end = this.msg.substring(1)

            // 重新拼接得到新的字符串，并赋值给 this.msg

            this.msg = end + start

          }, 100)

          // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

        },

        stop() {

          // 停止定时器

          clearInterval(this.intervalId)

          // 每当清除了定时器之后，需要重新把 intervalId 置为 null

          this.intervalId = null;

          //每次停止就重置data的数据

          this.msg = '猥琐发育，别浪~~！'

        }

      }

    })

    // 分析：

    // 1. 给 【浪起来】 按钮，绑定一个点击事件   v-on   @

    // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，

    //    然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；

    // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；

  </script>

</body>

</html>

Vue 小实例 跑马灯效果的更多相关文章

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

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

  2. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  3. Vue.js01：跑马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. VUE之文字跑马灯效果

    VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

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

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

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

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

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

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

  9. vue实现跑马灯效果

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

随机推荐

  1. oracle误操作commit之后，可以闪回数据

    1. 授予行迁移权限 alter table table_name enable row movement; 2. 到15分钟前: flashback table order   to timesta ...

  2. JS实现AES加密并与PHP互通的方法分析

    <script type="text/javascript" src="/CryptoJS/aes.js"></script><s ...

  3. Cannot read property 'appendChild' of null

    1.js报错解决办法 这个一般是你获取的节点不存在引起的. 可能出现这种情况的原因:你获取这节点时,节点还没加载,例如:你的JS写在head里面,取body里面的某一节点,这时候是取不到的.这种情况的 ...

  4. 2019-1-29-jekyll-如何加密博客-防止抓取

    title author date CreateTime categories jekyll 如何加密博客 防止抓取 lindexi 2019-01-29 16:26:17 +0800 2018-2- ...

  5. Laravel 单设备登录

    https://laravel-china.org/articles/10605/laravel-single-device-login 前几天在 laracasts 看了laravel5.6的新功能 ...

  6. 【windows系统下的navicat与ubuntu中的mysql的连接方法】

    ##红色代码直接复制到终端 1.首先,终端上mysql -u root -p,进入你的mysql数据库,操作数据库use mysql.2.切换root权限:sudo -i3.对root授权,输入:gr ...

  7. Java练习 SDUT-2561_九九乘法表

    九九乘法表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 九九乘法表是数学学习的基础,今天我们就来看看乘法表的相关问题 ...

  8. H5+ 重写在线升级版本比较代码

    重写h5+在线升级版本比较代码 hello h5+版本在线升级提供了如下的版本比较方法,逻辑比较繁琐,相关判断多余,非常不宜读. 先判断新旧版本有无, 接着分割为数组比较数组项大小,而且还只取了前四项 ...

  9. 配置上这个模板Bug少90%

    本来写程序经常会碰到各种难缠的Bug,自从修改了注释模板,bug明显少了,看效果图: 好吧,我逗比了 下面是文字版: /** _oo0oo_ o8888888o 88" . "88 ...

  10. python 成员

    一.成员 1.实例变量 对象.属性=xxxx class Person: def __init__(self,name,id,gender,birth): self.name = name self. ...