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. 8b10b

    目的:保持直流平衡DC Balance). running disparity() 8bit原始数据会分成两部分,其低5位会进行5B/6B编码,高3位则进行3B/4B编码,这两种映射关系在当时已经成为 ...

  2. windows开启禁用网卡

    ' 在Windows中实现sudo命令--命令行环境中获取管理员权限 'ShellExecute 方法 '作用: 用于运行一个程序或脚本. '语法 ' .ShellExecute "appl ...

  3. SceneControl+AE+鼠标滚轮缩放

    要为SceneControl设置鼠标滚轮缩放必须定义委托,因为SceneControl没有Wheel事件,所以委托From的Wheel事件 public Form1() { InitializeCom ...

  4. Java多线程-并发协作(生产者消费者模型)

    对于多线程程序来说,不管任何编程语言,生产者和消费者模型都是最经典的.就像学习每一门编程语言一样,Hello World!都是最经典的例子. 实际上,准确说应该是“生产者-消费者-仓储”模型,离开了仓 ...

  5. struts2从浅至深（二）详细配置

    1.加载时机 当应用被服务器加载时,Struts的配置文件就已经加载了 2.加载顺序 default.properties------->struts-default.xml---------& ...

  6. android周期性任务

    一般任务调度机制的实现方式主要有: Thread sleep.Timer.ScheduledExecutor.Handler和其他第三方开源库.android的AlarmManager 1. Time ...

  7. 使用工厂方法配置bean的两种方式

    1.使用静态工厂方法: 对应的配置.xml文件: 2.通过实例工厂的方法来配置bean: 对应的xml文件:

  8. Spring容器中bean的生命周期以及关注spring bean对象的后置处理器：BeanPostProcessor（一个接口）

    Spring IOC 容器对 Bean 的生命周期进行管理的过程: 1.通过构造器或工厂方法创建 Bean 实例 2.为 Bean 的属性设置值和对其他 Bean 的引用 3.将 Bean 实例传递给 ...

  9. SSH框架中配置log4j的方法

    SSH框架中使用log4j的方便之处 1. 动态的改变记录级别和策略,即修改log4j.properties,不需要重启Web应用,这需要在web.xml中设置一下.2. 把log文件定在 /WEB- ...

  10. [诈骗]“中国移动”发送诈骗短信，china mobile 是骗子吗？

    今年,这是我遇到的第二次短信诈骗了,两次的手法都是完全一样的.第一次,冒充的是招商银行的积分活动,结果我还真的输入了银行卡与取款密码. 输入完之后,我才醒悟,然后立刻打招商客服电话咨询,改行是否在进行 ...