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. C++之类和对象的使用（一）

    对象的初始化 在声明类时直接对数据成员初始化是错误的!下面的例子时错误的!! class Time{ hour =; minitu=; sec=; } //因为类并不是一个实体,而是一种抽象类型,并不 ...

  2. ics

    5.网分用法 时延测试: Format ->Delay Scale Ref -> AUTO SCALE Marker Search -> TRACKING[ON OFF]这样以后把M ...

  3. 基于SceneControl单击查询功能的实现

    private void HandleIdentify_MouseDown(object sender, ISceneControlEvents_OnMouseDownEvent e) { this. ...

  4. Android真机调试试验

    之前一直使用模拟器,很不好用,今天使用真机调试试验. 准备材料:电脑,Android手机. 首先,就遇到了一个问题,我的手机是华为的,之前不知道怎么回事,打开调试总是自动关闭,而且切换总是切换不了,老 ...

  5. 如何用命令行将我的Phonegap环境更新到最新版本？

    从npm安装的Phonegap(version > 3.0),更新命令如下 npm update -g phonegap 检查当前本机环境的最新版本 phonegap -v 检查npm的最新ph ...

  6. HDU1518 Square（DFS） 2016-07-24 15:08 49人阅读 评论(0) 收藏

    Square Problem Description Given a set of sticks of various lengths, is it possible to join them end ...

  7. 集合（一）ArrayList

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

  8. Python中通过open()操作文件时的文件中文名乱码问题

    最近在用Python进行文件操作的时候,遇到创建中文文件名的乱码问题. Python默认是不支持中文的,一般我们在程序的开头加上#-*-coding:utf-8-*-来解决这个问题,但是在我用open ...

  9. Argument list too long error for rm, cp, mv commands

    Another option is to use find's -delete flag: find . -name "*.pdf" -delete

  10. [ACM_模拟] UVA 12503 Robot Instructions [指令控制坐标轴上机器人移动 水]

      Robot Instructions  You have a robot standing on the origin of x axis. The robot will be given som ...