vue（二）跑马灯效果

最新推荐文章于 2023-10-08 16:19:23 发布

不许偷苹果

最新推荐文章于 2023-10-08 16:19:23 发布

阅读量140

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_38904347/article/details/102153243

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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.js"></script>
</head>
<body>
  <div id="app">
    <input type="button" value="浪起来" @click="start">
    <input type="button" value="低调" @click="end">
    <p>{{ msg }}</p>
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        msg:"猥琐发育别浪。。。",
        setIntervalID:null
      },
      methods:{
        start() {
          if(this.setIntervalID != null) return;
          this.setIntervalID = setInterval(() => {
            let a = this.msg.substring(0,1);
            let b = this.msg.substring(1);
            this.msg = b + a;
            console.log(b + a);
          },400)
        },
        end() {
          clearInterval(this.setIntervalID);
          this.setIntervalID = null;
        }
      }
    })
  </script>
</body>
</html>