VUE之文字跑马灯效果

最新推荐文章于 2024-02-27 14:19:43 发布

weixin_30408309

最新推荐文章于 2024-02-27 14:19:43 发布

阅读量460

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/charlypage/p/10166391.html

版权

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>

转载于:https://www.cnblogs.com/charlypage/p/10166391.html

weixin_30408309

关注

0
点赞
踩
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>&...
复制链接

扫一扫