用Vue写跑马灯的几种方法

最新推荐文章于 2025-04-29 15:37:14 发布

script~

最新推荐文章于 2025-04-29 15:37:14 发布

阅读量2.7k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48780364/article/details/127895571

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跑马灯</title>
</head>

<body>
  <!--   <div id="app">
    <button @click="move" :disabled="disabled">骚起来</button>
    <button @click="stop" :disabled="!disabled">停止骚动</button>
    <div>{{msg}}</div>
  </div> -->
  <div id="app">
    <button @click="move">骚起来</button>
    <button @click="stop">停止骚动</button>
    <div>{{msg}}</div>
  </div>
</body>
<!-- <script src="../vue-2.4.0.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //方法一:利用that传递（普通函数）
  /*   var vm = new Vue({
      el: '#app',
      data: {
        msg: '123456789',
        timer: null
      },
      methods: {
        move() {
          let that = this;
          clearInterval(this.timer)
          this.timer = setInterval(function () {
            var first = that.msg.substring(0, 1);
            var last = that.msg.substring(1);
            that.msg = last + first;
          }, 200)
        },
        stop() {
          clearInterval(this.timer)
        }
      }
    }) */
</script>
<script>
  //方法二：箭头函数
  /*   let vm = new Vue({
      el: '#app',
      data: {
        msg: '112233445566778899',
        timer: null
      },
      methods: {
        move() {
          clearInterval(this.timer);
          timer = setInterval(() => {
            let first = this.msg.substring(0, 1);
            let last = this.msg.substring(1);
            this.msg = last + first;
          },100)
        },
        stop() {
          clearInterval(this.timer)
        }
      }
  
    }) */
</script>
<script>
  //方法三 按钮禁用
  /*   var vm = new Vue({
      el:'#app',
      data:{
        msg:'00001111222233334444',
        timer:null,
        disabled:false
      },
      methods:{
        move(){
          this.timer = setInterval(() => {
            let first = this.msg.substring(0,1);
            let last = this.msg.substring(1);
            this.msg = last + first;
            this.disabled = true
          }, 100);
        },
        stop(){
          clearInterval(this.timer);
          this.disabled = false
        }
      }
    }) */

</script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '112233445566778899',
      timer: null
    },
    methods: {
      move() {
        if (this.timer == null) {
          this.timer = setInterval(() => {
            let first = this.msg.substring(0, 1);
            let last = this.msg.substring(1);
            this.msg = last + first;
          },200)
        }
      }
      ,
      stop() {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  })
</script>

</html>