vue中实现跑马灯效果

最新推荐文章于 2024-08-22 02:07:07 发布

正儿八经学前端

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量473

点赞数

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

本文链接：https://blog.csdn.net/weixin_42101753/article/details/106121207

版权

demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue实现跑马灯案例，话不多说直接上代码。

<div id="app">
  <button @click="start">走</button>
  <button @click="stop">停</button>
  <h1>{{ msg }}</h1>
</div>

<script src="vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '萨瓦迪卡，欢迎大家，欢迎大家来到美丽的泰国！',
      timeId: ''## 标题
    },
    methods: {
      start() {
        // clearInterval(this.timeId)
        // 如果timeId有值，说明开过定时器，直接return
        if (this.timeId) return
        this.timeId = setInterval(() => {
          // 把字符串的第一个字符串放到最后
          // 字符串
          // console.log(this.msg)
          this.msg = this.msg.slice(1) + this.msg.slice(0, 1)
        }, 300)
      },
      stop() {
        clearInterval(this.timeId)
        // 还应该把timeid清空
        this.timeId = ''
      }
    }
  })
</script>