首页 > 其他 > 详细

VUE之文字跑马灯效果

时间:2018-12-24 02:26:30      阅读:271      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!