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. 顺序表[A+B->C]

    /*----代码段@映雪------*/ /*采用顺序表存储,改成数组也行*/ int MergeList(SeqList &A,SeqList &B,SeqList &C) ...

  2. 小强 ROS 机器人教程

    首先请您自行依据线标提示将小强接线连接好,完整结构如下两图所示: 小强是属于Turtlebot机器人.它由底盘.主机.Kinect相机(通过USB连接主机)组成,没有显示屏.如果要通过显示器查看主机的 ...

  3. 软件工程作业 - 实现WC功能（java）

    项目地址:https://github.com/yogurt1998/WordCount 要求 基本要求 -c 统计文件字符数(实现) -w 统计文件单词数(实现) -l 统计文件行数(实现) 扩展功 ...

  4. 使用Java web工程建立Maven Web Module工程

    1. 前言 之前有一篇关于搭建S2SH的文章中提到建立Maven Web Module工程,有人反馈说这个方面不会.那还是唠叨一下,写篇文章说明一下吧. 建立Maven Web Module的方式有多 ...

  5. ABP 基础设施层——集成 NHibernate

    本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.com/Pages/Documents/NHibern ...

  6. WPF核心对象模型-类图和解析

    DispatcherObject是根基类,通过继承该类,可以得到访问创建该对象的UI线程的Dispatcher对象的能力.通过Dispatcher对象,可以将代码段合并入该UI线程执行. Depend ...

  7. From Alpha to Gamma (II)

    这篇文章被拖延得这么久是因为我没有找到合适的引言 -- XXX 这一篇接着讲Gamma.近几年基于物理的渲染(Physically Based Shading, 后文简称PBS)开始在游戏业界受到关注 ...

  8. 面试题-选择题Python

    一. 6.下列表达式中返回为True的是() A.3>2>2   false B.'abc'>'xyz' false C.0x56<56 86<56   false 0x ...

  9. s11 day105

  10. FunDA（14）－ 示范：并行运算，并行数据库读取 - parallel data loading

    FunDA的并行数据库读取功能是指在多个线程中同时对多个独立的数据源进行读取.这些独立的数据源可以是在不同服务器上的数据库表,又或者把一个数据库表分成几个独立部分形成的独立数据源.当然,并行读取的最终 ...