首页 > 其他分享> > vue制作滚动条幅-跑马灯效果实例代码

vue制作滚动条幅-跑马灯效果实例代码

2020-01-30 11:54:18 作者：互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" :value="startBtn" @click="startRoll" />
            <input type="button" :value="endBtn" @click="endRoll" />
            <p>{{content}}</p>
        </div>
    </body>
    <script type="text/javascript">
        var test = function(){
            alert("hello")
        }
        var vm = new Vue({
            el:'#app',
            data:{
                startBtn:'开始滚动',
                endBtn:'停止滚动',
                content:'中国加油，武汉人民加油，我们一定可以战胜疫情的！',
                intervalId:null
            },
            methods:{
                startRoll(){
                    if(this.intervalId != null){return}
                    this.intervalId = setInterval(function(){
                        console.log(vm)
                        var first = vm.content.substring(0,1)
                        var end = vm.content.substring(1,vm.content.length)
                        vm.content = end + first
                        console.log(vm.content)
                    },500)
                },
                endRoll(){
                    clearInterval(this.intervalId)
                    this.intervalId = null
                }
            }
        })
    </script>
</html>

效果：

标签：vue,条幅,vm,intervalId,content,跑马灯,var,滚动,null
来源： https://www.cnblogs.com/Mishell/p/12242389.html