vue的走马灯示例

思路：

读取列表前一位，赋值为start。再取出第一位之后的全部！新的列表拼接成=end+start即可！

                    // substring(start,stop)
                    // start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
                    // stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
                    //         如果省略该参数，那么返回的子串会一直到字符串的结尾。

然后设置一个计时器。再设置一个清空计时器的函数。但是无论是设置计时器，还是清空计时器。都要有判断条件的！

结果：

1，初始：

2，点击开始：

3，点击结束：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="button" value="走起" @click="gogo">
        <input type="button" value="停止" @click="stop">
        <h4>{{msg}}</h4>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢迎光临！',
                intervalid:null

            },
            methods:{
                gogo() {
                    if(this.intervalid == null){
                        var _this = this
                    this.intervalid = setInterval(function(){
                        console.log(_this.msg)
                    var start = _this.msg.substring(0,1)
                    var end = _this.msg.substring(1)
                    // substring(start,stop)
                    // start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
                    // stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
                    //         如果省略该参数，那么返回的子串会一直到字符串的结尾。
                    _this.msg = end+start
                    },400)
                    }
                },
                stop(){
                    clearInterval(this.intervalid)
                    this.intervalid = null
                }
            }
        })
    </script>
</body>
</html>

猜你喜欢