跑马灯效果 --Y.

  1. HTML结构:
    <div id="app">

        <p>{{info}}</p>

        <input type="button" value="开启" v-on:click="go">

        <input type="button" value="停止" v-on:click="stop">

      </div>
  1. Vue实例:
        // 创建 Vue 实例,得到 ViewModel

        var vm = new Vue({

          el: '#app',

          data: {

            info: '猥琐发育,别浪~!',

            intervalId: null

          },

          methods: {

            go() {

              // 如果当前有定时器在运行,则直接return

              if (this.intervalId != null) {

                return;

              }

              // 开始定时器

              this.intervalId = setInterval(() => {

                this.info = this.info.substring(1) + this.info.substring(0, 1);

              }, 500);

            },

            stop() {

              clearInterval(this.intervalId);

            }

          }

        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值