vue 学习（1）

最新推荐文章于 2025-06-08 11:04:07 发布

转载最新推荐文章于 2025-06-08 11:04:07 发布 · 181 阅读

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现跑马灯效果的方法。通过定时器不断将字符串的第一个字符移到末尾，达到文字滚动的效果。提供了开始和停止按钮，允许用户控制跑马灯的运行状态。

跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.min.js"></script>
    <div id="app">
        <input type="button" @click="start" value="start">
        <input type="button" @click="stop" value="stop">
        <p>{{msg}}</p>
    </div>
</head>
<body>

</body>
</html>
<script >
var vm = new Vue({
    el:'#app',
    data:{
        msg: '猥琐发育别浪;;;;;',
        intervalId: null
    },
    methods: {
        lang(){
            var end =  this.msg.substring(0, 1);
            var start = this.msg.substring(1, this.msg.lenth) ;
            this.msg = start + end;
        },
        start(){
            if(this.intervalId){
                return;
            }
            this.intervalId = setInterval(this.lang, 100);
        },
        stop(){
            clearInterval(this.intervalId);
            this.intervalId = null;
            this.msg = '猥琐发育别浪;;;;;';
        }
    },
});

</script>