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. jdk更换不起作用问题

    本人前面装了jdk8,现在准备用jdk7,我安装好了jdk7:把系统变量中的JAVA_HOME 改为 D:\java\jdk\jdk7\jdk1.7.0_67,Path 下添加如下变量,记得加;和上一 ...

  2. （二分匹配 模板 KM）奔小康赚大钱--hdu--2255

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=2255 代码: #include <iostream> #include <cstdio ...

  3. CDialog

    对话框和对话框类CDialog 对话框经常被使用,因为对话框可以从模板创建,而对话框模板是可以使用资源编辑器方便地进行编辑的. 模式和无模式对话框 对话框分两种类型,模式对话框和无模式对话框. 模式对 ...

  4. 股票——成交量加权平均价VWAP

    成交量加权平均价是将多笔交易的价格按各自的成交量加权而算出的平均价,若是计算某一证券在某交易日的VWAP,将当日成交总值除以总成交量即可.VWAP可作为交易定价的一种方法,亦可作为衡量机构投资者或交易 ...

  5. 集合（一）ArrayList

    前言 这个分类中,将会写写Java中的集合.集合是Java中非常重要而且基础的内容,因为任何数据必不可少的就是该数据是如何存储的,集合的作用就是以一定的方式组织.存储数据.这里写的集合,一部分是比较常 ...

  6. Python学习-41.Python中的断言

    先来点题外话: 在现代编程开发中,TDD(测试驱动开发)变得越来越流行(PS:DDD(领域驱动开发)也是,但两者并不冲突,就像面向过程和面向对象).而作为TDD的根本——单元测试也是越来越重要,单元测 ...

  7. Linux - 修改文件编码

    enca -L zh_CN -x UTF- file

  8. tf中softmax_cross_entropy_with_logits与sparse_softmax_cross_entropy_with_logits

    其实这两个都是计算交叉熵,只是输入数据不同. #sparse 稀疏的.稀少的 word_labels = tf.constant([2,0]) predict_logits = tf.constant ...

  9. CentOS7布署.Net Core

    本文记录的所有东西,都是吸取别人的经验,自己实践得来,记录下来,也是为了某一天,用上的时候,能够更加的得心应手,平日的学习,都是未雨绸缪之举,但愿,这些笔记,也能帮上正在摸索的你. 第一步,下载虚拟机 ...

  10. forname，newInstance的作用及使用

    Forname可以获得类名对应的class对象: String classname=“java.util.Date” Class cl=Class.forName(className); newIns ...