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. 理解Defer、Panic和Recover

    刚开始的时候理解如何使用Defer和Recover有一点怪异,尤其是使用了try/catch块的时候.有一种模式可以在Go中实现和try/catch语句块一样的效果.不过之前你需要先领会Defer.P ...

  2. java基础-day1

    第01天 java基础知识 今日内容介绍 u Java概述.helloworld案例 u 工具安装 .配置环境变量.注释.关键字 u 常量.变量.数据类型.标识符 第1章   Java概述 1.1  ...

  3. [翻译] FastReport "Text" 对象中使用表达式

    文本对象的最重要的功能之一是它不仅能够显示静态文本还能显示表达式.表达式混合在正常的文本内容中,让我们看一个简单的例子,他是如何工作的.在文件对象的内容中,输入以下字符: Hello, World! ...

  4. [Delphi]带进度条的ListView

    带进度条的ListView unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, C ...

  5. 【算法33】LRU算法

    题目来源 LeetCode: https://leetcode.com/problems/lru-cache/ LRU简介 LRU (Least Recently Used,最近最少使用)算法是操作系 ...

  6. memcached分布式缓存系统

    在数据驱动的Web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵活.此时 ...

  7. DAC--使用DAC来导出数据库脚本

    //============================================== //功能介绍:使用DAC来导出数据库脚本 //注意事项: //1.本程序涉及到的DLL有: //  - ...

  8. datename和datepart

    select datename(year, getdate()) + 'aaa11' --不报错 datename返回的是nvarchar类型 select datalength(datename(y ...

  9. C# 泛型实现Table与实体的相互转换

    public class ModelHandler<T> where T : new() { /// <summary> /// Table转换成实体 /// </sum ...

  10. wpf简单进度条

    UserControl x:Class="WpfApplication1.UserControl2" xmlns="http://schemas.microsoft.co ...