当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 初学VUE 走马灯效果

初学VUE 走马灯效果

2019年10月26日  | 移动技术网IT编程  | 我要评论 
<!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前端大澳 领取资料

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网