1.效果演示

2.相关代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue-2.4.0.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <input type="button" value="浪起来" @click="lang">
  11.     <input type="button" value="低调" @click="stop">
  12.     <h4>{{msg}}</h4>
  13. </div>
  14. <script>
  15.     var vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             msg: "猥琐发育,别浪~~!",
  19.             interval: null
  20.         },
  21.         methods: {
  22.             lang: function () {
  23.                 console.log(this.msg);
  24.                 var _this = this;
  25.                 _this.interval = setInterval(function () {
  26.                     //获取第一个字符
  27.                     var start = _this.msg.substring(0, 1);
  28.                     //得到后面的字符
  29.                     var end = _this.msg.substring(1);
  30.                     //重新赋值
  31.                     _this.msg = end + start;
  32.                 }, 400)
  33.             },
  34.             stop:function () {
  35.                 //停止定时器
  36.                 clearInterval(this.interval);
  37.             }
  38.         }
  40.     });
  42. </script>
  43. </body>
  44. </html>

VUE之文字跑马灯效果的更多相关文章

  1. Android开发：文本控件详解——TextView（二）文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  2. 用jQuery实现参数自定义的文字跑马灯效果

    一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...

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

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

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

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

  5. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  6. Vue.js01：跑马灯效果

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

  7. Vue 小实例 跑马灯效果

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

  8. [转]实现文字跑马灯效果，scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

  9. 实现一个微信小程序组件：文字跑马灯效果

    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...

随机推荐

  1. 整理iOS9适配中出现的坑

    一.NSAppTransportSecurity iOS9让所有的HTTP默认使用了HTTPS,原来的HTTP协议传输都改成TLS1.2协议进行传输.直接造成的情况就是App发请求的时候弹出网络无法连 ...

  2. hdu 5007

    http://acm.hdu.edu.cn/showproblem.php?pid=5007 字符串处理 暴力 #include <cstdio> #include <cstdlib ...

  3. KMP回顾学习

    记住这张图,getnext就是对一个已知的待匹配的串进行分析,nex[i]表示当a[i]匹配失败后我能跳到哪里,继续尝试匹配,而不是每一次失败都从头再来,先来看看代码 const int maxn = ...

  4. java编程中Properties类的具体作用和使用！

    如果不熟悉 java.util.Properties类,那么现在告诉您它是用来在一个文件中存储键-值对的,其中键和值是用等号分隔的.(如清单 1 所示).最近更新的java.util.Properti ...

  5. MySQL常用功能语句分类总结

    C(创建型功能) 创建数据库:CREATE DATABASE 创建用户:CREATE USER 用户名@主机 IDENTIFIED BY 密码; -- 如果想让该用户可以从任意远程主机登陆,可以使用通 ...

  6. ModuleNotFoundError: No module named 'sqlite'

    解决 ModuleNotFoundError: No module named 'sqlite'.问题 今天在将Python2.7升级至Python3.6后导入sqlite模块时出现了一下报错,到网上 ...

  7. Spring Boot 应用系列 1 -- Spring Boot 2 整合Spring Data JPA和Druid，双数据源

    最近Team开始尝试使用Spring Boot + Spring Data JPA作为数据层的解决方案,在网上逛了几圈之后发现大家并不待见JPA,理由是(1)MyBatis简单直观够用,(2)以Hib ...

  8. RabbitMQ基础入门篇

    下载安装 Erlang RabbitMQ 启动RabbitMQ管理平台插件 DOS下进入到安装目录\sbin,执行以下命令 rabbitmq-plugins enable rabbitmq_manag ...

  9. js form 表单 重置 清空

    清空 和 重置的差异是 清空是彻底清空input内容即便初始值value有值,重置是将input内容重置为value初始状态 很简单记录下 方便之后使用 //重置 //document.getElem ...

  10. 【cocos2d-x 手游研发小技巧（6）聊天系统+字体高亮】

    转载请注明出处:http://www.cnblogs.com/zisou/p/cocos2dxJQ-6.html 聊天系统在手机网游中是最常见的交互工具,大家在一起边玩游戏边聊天岂不乐哉: 废话不多了 ...