欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初学VUE 走马灯效果

程序员文章站 2022-07-09 21:10:27
很简单的走马灯效果 关注公众号 WEB前端大澳 领取资料 ......
<!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="./js/vue.js"></script>
</head>

<body>
  <div id="a">
    <input type="button" value="浪起来" @click='lang'>
    <input type="button" value="稳住" @click='tingzhi'>
    <p>{{ msg }}</p>
  </div>
</body>
<script>
  // vm上的数据发生变化 就会把新的数据从data中同步到页面中去
  const vm = new vue({
    el: '#a',
    data: {
      msg: '大家一起嗨起来~~~!',
      id: null,
    },
    methods: {
      lang() {
        //   vue中想要获取上个局部数据 要用到this 但是这里有用到了定时器 this会指向window 所以我用了es6中的 =>函数
        if (this.id != null) return;
        // 要给一个点击的判断 要不然就会出现多次运行定时器 停止就不会管用了
        this.id = setinterval(() => {
          const q = this.msg.substring(0, 1);
          const h = this.msg.substring(1);
          // 把截取的字符创拼接到 msg 中
          this.msg = h + q;

        }, 100)
      },
      tingzhi() {
        clearinterval(this.id);
        // 要把初始值在赋给 msg 要不然定时器不会再执行
        this.id = null;
      }
    }
  })
</script>

</html>

很简单的走马灯效果

 

 

 关注公众号 web前端大澳 领取资料

 

初学VUE 走马灯效果