初学VUE 走马灯效果

最新推荐文章于 2022-10-26 10:35:57 发布

Big澳

最新推荐文章于 2022-10-26 10:35:57 发布

阅读量238

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/lwaweb/article/details/102943025

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初学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>

Big澳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学VUE 走马灯效果

初学VUE 走马灯效果很简单的走马灯效果代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫

专栏目录