1.效果演示

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app">

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

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

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

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            msg: "猥琐发育,别浪~~!",

            interval: null

        },

        methods: {

            lang: function () {

                console.log(this.msg);

                var _this = this;

                _this.interval = setInterval(function () {

                    //获取第一个字符

                    var start = _this.msg.substring(0, 1);

                    //得到后面的字符

                    var end = _this.msg.substring(1);

                    //重新赋值

                    _this.msg = end + start;

                }, 400)

            },

            stop:function () {

                //停止定时器

                clearInterval(this.interval);

            }

        }

    });

</script>

</body>

</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. 【转】Paxos算法3-实现探讨

    ——转自:{老码农的专栏} 前两篇Paxos算法的讨论,让我们对paxos算法的理论形成过程有了大概的了解,但距离其成为一个可执行的算法程序还有很长的路要走,原因是很多的细节和错误未被考虑.Googl ...

  2. UVa 11292 Dragon of Loowater （水题，排序）

    题意:有n个条龙,在雇佣勇士去杀,每个勇士能力值为x,只能杀死头的直径y小于或等于自己能力值的龙,只能被雇佣一次,并且你要给x赏金,求最少的赏金. 析:很简单么,很明显,能力值高的杀直径大的,低的杀直 ...

  3. python 编码方式大全 fr = open(filename_r,encoding='cp852')

    7.8.3. Standard Encodings Python comes with a number of codecs built-in, either implemented as C fun ...

  4. 使用系统的CoreLocation定位

    ////  ViewController.m//  LBS////  Created by tonnyhuang on 15/8/28.//  Copyright (c) 2015年 tonnyhua ...

  5. NSString NSMutableString

    // NSString         //代开API文档         //Xcode -> help - Documentation and API Reference           ...

  6. iOS 5 故事板进阶(2)

    让我们回到游戏排行窗口Ranking.创建一个 UITableViewController子类,命名为 RankingViewController. 编辑 RankingViewController. ...

  7. Android-LoaderManager异步加载数据库数据

    LoaderManager异步加载数据库数据,是在(Activity/fragment/其他UI等) 加载大量的本地Database库表数据,由于数据大在加载过程中会导致UI线程阻塞,导致用户体验不好 ...

  8. mvc 读写txt文档

    -----------------写入内容---------------- string userfile = "UserData.txt"; StreamWriter sw = ...

  9. 【转】Bri's改装笔记

    网上关于三菱蓝瑟的改装方案的文章不少,但在以不换发动机为前提的理性改装确是这两篇和东南汽车俱乐部科仔的那篇<4G18的低成本NA玩法>最具参考价值. 小排量NA车的乐趣不在于跟人比直线加速 ...

  10. Day 25 多态.

    一.多态的概念 多态指的是一类事物有多种形态.动物有多种形态:人,狗,猪 from abc import ABCMeta,abstractmethod class Animal(metaclass=a ...