码迷,mamicode.com
首页 > 其他好文 > 详细

VUE之文字跑马灯效果

时间:2018-12-24 03:01:15      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:this   log   utf-8   .com   相关   charset   cli   input   code   

VUE之文字跑马灯效果

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之文字跑马灯效果

标签:this   log   utf-8   .com   相关   charset   cli   input   code   

原文地址:https://www.cnblogs.com/charlypage/p/10166391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!