初学VUE 走马灯效果

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!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 走马灯效果 的全部内容， 来源链接： utcz.com/z/377929.html

回到顶部