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. （动态规划 01背包 打印路径） CD --UVA --624

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#problem/G 每个CD的时间不超过 20没有哪个CD的时间是超过N ...

  2. （动态规划 最长有序子序列）Monkey and Banana --HDU --1069

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1069 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  3. （网络流） Sabotage -- UVA -- 10480

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#problem/J 代码: #include<cstdio> ...

  4. EF学习笔记-CODE FIRST-约定

    首先EF对关系数据库的映射遵循如下规则: Fluent API 配置 override 数据注释 override 约定 System.Data.Entity.ModelConfiguration.C ...

  5. Node.js最新Web技术栈（2015年5月）

    https://cnodejs.org/topic/55651bf07d4c64752effb4b1

  6. fleet中service之间的依赖关系

    最近有人在topcoder上提出使用fleet在集群上部署service时有时候会发现,当启动依赖于整个集群服务的service时,只会检查那个service所在机器的依赖关系,这样就会造成一些问题, ...

  7. tomcat监听activemq jms配置

    当从webservice接收到信息的时候,消息生产者producer立刻把收到的消息放入到jms里面,消费者cusomer这时要设置一个监听,当生产者发送消息时,只要消息被发出来,消费者就会接收到消息 ...

  8. SQL SERVER 2014--内存表实现秒杀场景

    ===================================== 网上针对“秒杀”的解决方案很多,数据拆分化解热点,READPAST解决锁问题,应用程序排队限制并发等等很多方式,各有优缺点, ...

  9. CentOS7查看CPU个数

    查看逻辑cpu个数:cat /proc/cpuinfo | grep "processor" | wc -l 查看物理cpu个数:cat /proc/cpuinfo | grep ...

  10. Oracle function函数赋权

    -- 1.赋权 -- 在原有权的账号下个执行 grant select on psprd.functionName to user; -- 2. 别名 -- 在需要使用别名的账号下执行 CREATE ...