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. 用Java操作数据库Datetime数据

    Date.Calendar.Timestamp的区别.相互转换与使用 1 Java.util.Date 包含年.月.日.时.分.秒信息. // String转换为Date String dateStr ...

  2. HDU 2089 不要62 (递推+暴力或者数位DP)

    题意:中文题. 析:暴力先从1到1000000,然后输出就好了. 代码如下: #include <iostream> #include <cstdio> #include &l ...

  3. where /group by/ having/ order by/

    1.order by 是 按字段 进行排序.. 字段后面可跟 desc 降序..asc 升序..默认为升序2.group by 是进行分组 查询3.having 和 where 都属于 条件过滤 区别 ...

  4. excel如何设置自增序列

    见图1 见图2 4,如果内容对您有所帮助,请打赏---1毛就足够感动我,诚信交友~

  5. Django：form.save()方法

    参考:https://blog.csdn.net/it_yuan/article/details/53580756 背景: 之前的博客是不支持上传文章缩略图的,后来新增了此功能,但是发现修改老的文章时 ...

  6. C#——调用C++的DLL 数据类型转换

    /C++中的DLL函数原型为        //extern "C" __declspec(dllexport) bool 方法名一(const char* 变量名1, unsig ...

  7. select * 和 select 所有字段写出来 ，速度对比！

    从很早时候,听老师说 select * from table  比 select a,b,c,d from table 要慢很多.3年来从未测试.  今天没事测一测, 不测不知道,一测吓一跳. 当然 ...

  8. Tomcat 7.x/8.x 优化

    一.优化Connector http://www.aikaiyuan.com/8466.html tomcat的运行模式有3种 1)bio 默认的模式,性能非常低下,没有经过任何优化处理和支持. 2) ...

  9. 20164317《网络对抗技术》Exp1 PC平台逆向破解

    实验目的: 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getSh ...

  10. Python(多线程threading模块)

    day27 参考:http://www.cnblogs.com/yuanchenqi/articles/5733873.html CPU像一本书,你不阅读的时候,你室友马上阅读,你准备阅读的时候,你室 ...