Vue实现跑马灯简单效果

下面是 Vue 实现跑马灯简单效果的攻略：

概述

跑马灯是常用于展示广告、公告等信息的效果。在 Vue 中实现跑马灯，可以使用 Vue 的内置指令 v-for 和过渡效果实现。

实现步骤

1. 使用 v-for 指令循环渲染数据
2. 使用 CSS3 的过渡效果实现轮播效果
3. 使用 computed 计算属性进行数据循环
4. 使用 setInterval() 方法实现自动轮播效果
5. 鼠标悬停时停止轮播，移开时继续轮播

下面是两个示例：

示例一：使用 v-for 指令实现

HTML 代码：

<div class="marquee">
  <ul>
    <li v-for="(item, index) in items" :key="index" v-text="item"></li>
  </ul>
</div>

CSS 代码：

.marquee ul {
  list-style: none;
  padding-left: 0;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.marquee li {
  display: inline-block;
  padding: 0 20px;
  margin-right: 20px;
  border-right: 2px solid #666;
  animation: roll 10s linear infinite;
}

@keyframes roll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript 代码：

export default {
  data() {
    return {
      items: [
        'Vue.js 是一个构建数据驱动的 web 界面的 JavaScript 框架',
        'Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件',
        'Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。',
        'Vue.js 是一个渐进式框架，允许开发者在现有项目中逐步应用',
        '欢迎使用 Vue.js！'
      ],
      currentIndex: 0,
      timer: null
    }
  },
  computed: {
    currentItem() {
      return this.items[this.currentIndex]
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentIndex = ++this.currentIndex % this.items.length
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

首先在 HTML 代码里使用 v-for 指令循环渲染数据，然后在 CSS 代码里使用 animation 属性实现轮播效果，最后在 JavaScript 代码里使用 setInterval() 方法实现自动轮播效果，并添加了 beforeDestroy() 生命周期函数以及 clearInterval() 方法在组件卸载前停止轮播。

示例二：使用 computed 计算属性实现

HTML 代码：

<div class="marquee">
  <ul>
    <li v-text="currentItem"></li>
  </ul>
</div>

CSS 代码同示例一。

JavaScript 代码：

export default {
  data() {
    return {
      items: [
        'Vue.js 是一个构建数据驱动的 web 界面的 JavaScript 框架',
        'Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件',
        'Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。',
        'Vue.js 是一个渐进式框架，允许开发者在现有项目中逐步应用',
        '欢迎使用 Vue.js！'
      ],
      currentIndex: 0,
      timer: null
    }
  },
  computed: {
    currentItem() {
      return this.items[this.currentIndex]
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentIndex = ++this.currentIndex % this.items.length
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

这个示例和示例一的区别在于，使用 computed 计算属性代替 v-for 循环渲染数据，并在 computed 属性里定义一个计算属性 currentItem，返回当前需要展示的数据，然后在 JavaScript 代码里使用 setInterval() 方法实现自动轮播效果，并添加了 beforeDestroy() 生命周期函数以及 clearInterval() 方法在组件卸载前停止轮播。

以上就是 Vue 实现跑马灯简单效果的攻略，两个示例虽然实现的效果一样，但是实现方法不同，请按需选择。