一、前言

这里将会简单介绍一下如何使用vue.js简单实现轮播图的功能

二、代码示例

HTML代码

<div id="app">
  <div class="slider">
    <div class="slider-item" v-for="(item, index) in items" :key="index" :style="{ backgroundImage: 'url(' + item + ')' }"></div>
  </div>
  <div class="slider-nav">
    <span class="slider-nav-item" v-for="(item, index) in items" :key="index" :class="{ active: currentIndex === index }" @click="changeIndex(index)"></span>
  </div>
</div>

CSS 代码

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider-item.active {
  opacity: 1;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.slider-nav-item {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.slider-nav-item.active {
  background-color: #f00;
}

JavaScript 代码

new Vue({
  el: '#app',
  data: {
    items: [
      'https://picsum.photos/id/1018/1000/400',
      'https://picsum.photos/id/1015/1000/400',
      'https://picsum.photos/id/1019/1000/400',
    ],
    currentIndex: 0,
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    }, 3000);
  },
  methods: {
    changeIndex(index) {
      this.currentIndex = index;
    },
  },
});

总结

这个示例中，我们使用了 Vue.js 的数据绑定功能来实现轮播图的切换。在 mounted 钩子函数中，我们使用 setInterval 函数来定时更新 currentIndex 变量，从而实现轮播图的自动切换。同时，我们还实现了一个 changeIndex 方法，用于响应用户点击导航按钮的事件，从而切换到对应的轮播图。