03-跑马灯效果

最新推荐文章于 2024-01-07 12:39:43 发布

原创最新推荐文章于 2024-01-07 12:39:43 发布 · 167 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

4 篇文章

订阅专栏

<!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>
</head>
<body>
    
    <div id="app">
        <h3>{{message}}</h3>
        <input type="button" value="开始" @click="doStart">
        <input type="button" value="停止" @click="doStop">
    </div>

</body>
<script src="lib/vue.min.js"></script>
<script>
    // 在vm实例中 如果想要获取data中的数据 或者想要调用methods中的方法 必须调用this.属性名 或者this.方法名 进行访问
    // 这里的this就表示我们new出来的vm对象实例


    // 注意 VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据 从data身上同步到页面中去 --> 好处：程序员只需要关心数据 不需要考虑如何重新渲染DOM页面
    var vm = new Vue({
        el:'#app',
        data:{
            message:'我是一个跑马灯~~跑呀跑呀跑~~~',
            intervalId :null,
        },
        methods:{
           doStart(){
               // 如果已经有定时器在运行了 则不能再开启新的定时器
               if(this.intervalId != null){
                   return
               }
               // => 这个符号 可以使用this调用data的属性 而不需要重新定义变量来使用data的属性
                this.intervalId = setInterval(() => {   // 内部的 this 与外部的this保持一致
                    var start = this.message.substring(0,1)
                    var end = this.message.substring(1)
                    this.message = end + start
                },300)
           },
           doStop(){
               clearInterval(this.intervalId)
               // 清空计时器后 需要 重新给intervalId赋值 否则不能再次运行
               this.intervalId = null;
           }
        }
    })

</script>
</html>