2019.4.18vue.js day3 走马灯完整代码

最新推荐文章于 2021-03-23 17:52:13 发布

猫四怡惑Yino

最新推荐文章于 2021-03-23 17:52:13 发布

阅读量265

点赞数

分类专栏： vue.js学习文章标签： vue.js

本文链接：https://blog.csdn.net/Janokaty/article/details/89373836

版权

vue.js学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这是走马灯的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.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: "猥琐发育，别浪！！！~~~",
            timer:null
        },

        methods: {
            lang () {
                clearInterval(this.timer);
                var _this = this;
                 this.timer = setInterval(function(){
                    var start = _this.msg.substring(0,1);
                    var end = _this.msg.substring(1);
                    _this.msg= end+start;
                    //console.log(_this.msg);
                },400)
            },
            stop(){
                clearInterval(this.timer);
            }
        }
    })
</script>
</body>
</html>

注意事项：
1.要想在stop方法里面用到timer这个变量，必须要先把它存入data数据里面，然后用this.timer去访问它。
2.在setInteval()方法中最开始要清除已经点击设置的定时器，不然就会一直增加定时器，就会越跑越快。

猫四怡惑Yino

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019.4.18vue.js day3 走马灯完整代码

这是走马灯的完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script></he...
复制链接

扫一扫

专栏目录