<!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="./js/vue.js"></script>

</head>

<body>

  <div id="a">

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

    <input type="button" value="稳住" @click='tingzhi'>

    <p>{{ msg }}</p>

  </div>

</body>

<script>

  // vm上的数据发生变化 就会把新的数据从data中同步到页面中去

  const vm = new Vue({

    el: '#a',

    data: {

      msg: '大家一起嗨起来~~~！',

      id: null,

    },

    methods: {

      lang() {

        //   vue中想要获取上个局部数据 要用到this 但是这里有用到了定时器 this会指向window 所以我用了es6中的 =>函数

        if (this.id != null) return;

        // 要给一个点击的判断 要不然就会出现多次运行定时器 停止就不会管用了

        this.id = setInterval(() => {

          const q = this.msg.substring(0, 1);

          const h = this.msg.substring(1);

          // 把截取的字符创拼接到 msg 中

          this.msg = h + q;

        }, 100)

      },

      tingzhi() {

        clearInterval(this.id);

        // 要把初始值在赋给 msg 要不然定时器不会再执行

        this.id = null;

      }

    }

  })

</script>

</html>

很简单的走马灯效果

关注公众号 WEB前端大澳 领取资料

初学VUE 走马灯效果的更多相关文章

  1. vue 实现走马灯效果

    Part.1  问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2  实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...

  2. Android TextView走马灯效果

    布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...

  3. android中设置TextView/Button 走马灯效果

    在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml ...

  4. android - TextView单行显示...或者文字左右滚动(走马灯效果)

    条件 TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine=&quo ...

  5. 初学vue出现空格警告的原因及其解决办法

    初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是 ...

  6. Jquery 图片走马灯效果原理

    本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> & ...

  7. css3 走马灯效果

    纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes.perspective.perspective-origin.tra ...

  8. vue 通知 走马灯效果

    封装一个子组件: <template> <div class="container"> <div class="wrap"> ...

  9. setTimeout()与setInterval()——走马灯效果

    JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout ...

随机推荐

  1. Ionic 的安装运行

    1.学习前准备工作 1.必须得安装 nodejs (建议安装最新的稳定版本) 2.必须有 Angular 基础:https://www.loaderman.com/goods-1047.html 2. ...

  2. 【原创】主机不能访问虚拟机CentOS7中的站点

    主机不能访问虚拟机CentOS7中的站点 ================================ 虚拟机上装好了centos7,并配好了nginx+php+mysql,但是本机就是无法访问. ...

  3. 查看linux是几位操作系统

    查看linux是几位操作系统 摘自:https://blog.csdn.net/a34569345/article/details/80179927 2018年05月03日 14:44:44 bill ...

  4. 123457123457---com.threeObj03.MaJiangertong--- 记忆翻牌益智游戏

    com.threeObj03.MaJiangertong--- 记忆翻牌益智游戏

  5. MG7780打印机喷嘴堵塞

    1.深度清洗,打印喷嘴图案,发现有颜色没有打印出来 2.墨盒一加墨水就往外冒,以为是满的,其实是内部已经堵塞而加不进去,因为出墨口并没有墨水向外流(出墨口没有盖起来).解决办法就是用没有针头的针管从加 ...

  6. iOS-tabBar切换不同控制器封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）

    首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...

  7. IPVS支持的调度算法

    对于后端的RS集群,LB是如何决策应该把消息调度到哪个RS节点呢?这是由负载均衡调度算法决定的.IPVS常用的调度算法有: 轮询(Round Robin) LB认为集群内每台RS都是相同的,会轮流进行 ...

  8. WEB前端动态背景集

    本资源是我在源代码网站上发现的,内附几十种背景动态特效,我单独提取出来精品背景特效在此分享,文件里有20多种精品动态效果,本人觉得可用作于个人博客主页背景,登陆页面背景等,有20多个背景特效,非常漂亮 ...

  9. FlappyBird

    学习CocosCreator有段时间了,现在花了两天时间写了个像素鸟的小游戏,这个游戏之前又看到过,但是不知道怎么又下架了,之前还是蛮火的游戏,想起来后去网上看了看,原来是因为侵犯了 超级玛丽 的游戏 ...

  10. Work? working!

    0.总要想想为什要做这个(目的是什么,优缺点,必要性,不用行不行,产品定位,如何保证最后的稳定性) 1.如何逐步排查问题所在(做实验+分析排查:不同的实验手段) 2.如何利用网络(搜索问题的所在,确定 ...