<!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. 【分类算法】朴素贝叶斯（Naive Bayes）

    0 - 算法 给定如下数据集 $$T=\{(x_1,y_1),(x_2,y_2),\cdots,(x_N,y_N)\},$$ 假设$X$有$J$维特征,且各维特征是独立分布的,$Y$有$K$种取值.则 ...

  2. Greenwich.SR2版本的Spring Cloud Config+BUS实例

    Spring Cloud Config统一的配置中心同注册中心Eureka一样,也分服务端和客户端.服务端用来保存配置信息,客户端用来读取.它的优势是基于Git仓库,支持多环境.多分支配置.动态刷新. ...

  3. Dubbo -- 关于 api接口调用不使用强依赖

    首先,我们都知道  Dubbo 调用api 需要提供暴露  接口,   消费端才通过 ZK 可以调用 通常我们都会使用 提供 api  jar包 的方式 使用  这样既方便又快捷 简单 只需要在spr ...

  4. zabbix3.4配置windowsAD登录

    转载自:[https://zabbix.com/documentation/3.4/zh/manual/web_interface/frontend_sections/administration/a ...

  5. 第十五章 单点登录——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 Shiro 1.2开始提供了Jasig CAS单点登录的支持,单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即可访问这些系统中的任何一个 ...

  6. iOS使用UIImageView展现网络图片(转载)

    在iOS开发过程中,经常会遇到使用UIImageView展现来自网络的图片的情况,最简单的做法如下: [cpp] view plaincopy   - (void)viewDidLoad { [sup ...

  7. 常见问题:计算机网络/运输层/TCP

    TCP 面向连接,全双工,点对点. TCP头格式 TCP包没有IP地址,IP地址在网络层的IP协议中,TCP包包括源端口号,目标端口号 一个TCP连接需要四个元祖表明是同一连接(src_ip,src_ ...

  8. 【计算机视觉】OpenCV读取视频获取时间戳等信息(PS:经测试并不是时间戳，与FFMPEG时间戳不一样)

    OpenCV中通过VideoCaptrue类对视频进行读取操作以及调用摄像头,下面是该类的API. 1.VideoCapture类的构造函数: C++: VideoCapture::VideoCapt ...

  9. selenium + python 环境配置 （一）

    超级无敌菜鸟 终于有空学习一下python 和 selenium 啦 第一步: 环境配置  (Windows版) 1. 下载安装python 根据你的电脑,下载一个python吧   这儿装的是pyt ...

  10. 《Tsinghua os mooc》第17~20讲 同步互斥、信号量、管程、死锁

    第十七讲 同步互斥 进程并发执行 好处1:共享资源.比如:多个用户使用同一台计算机. 好处2:加速.I/O操作和CPU计算可以重叠(并行). 好处3:模块化. 将大程序分解成小程序.以编译为例,gcc ...