用vue怎么实现以上代码

可以使用以下的 Vue 组件代码实现：

<template>
  <div class="container">
    <div class="square"></div>
    <div class="images" :style="{ transform: 'translateX(-' + distance + 'px)' }">
      <img v-for="img in imgs" :key="img.index" :src="img.src" :data-index="img.index" :class="{ active: img.active }" @click="handleClick(img)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        { src: 'img1.jpg', index: 1, active: true },
        { src: 'img2.jpg', index: 2, active: false },
        { src: 'img3.jpg', index: 3, active: false },
        { src: 'img4.jpg', index: 4, active: false },
        { src: 'img5.jpg', index: 5, active: false },
        { src: 'img6.jpg', index: 6, active: false },
        { src: 'img7.jpg', index: 7, active: false },
        { src: 'img8.jpg', index: 8, active: false }
      ],
      imgWidth: 40,
      distance: 0
    };
  },
  computed: {
    activeImg() {
      return this.imgs.find(img => img.active);
    }
  },
  methods: {
    handleClick(img) {
      this.distance = (img.index - 1) * this.imgWidth;
      this.imgs.forEach(img => img.active = false);
      img.active = true;
      if (img !== this.imgs[0]) {
        this.imgs.splice(this.imgs.indexOf(img), 1);
        this.imgs.unshift(img);
      } else {
        this.imgs.push(this.imgs.shift());
      }
    }
  },
  mounted() {
    this.imgs[0].active = true;
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.images {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
}

.images img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.images img:first-child {
  border: 2px solid #000;
}

.images img.active {
  border: 2px solid #000;
}
</style>

这个 Vue 组件和之前的代码实现基本相同，只不过使用了 Vue 的数据绑定和计算属性来处理图片容器的宽度和鼠标悬停事件。当点击某个图片时，它会被移到最左边，并且它之前的图片会被移到最右边。点击的图片会在中间的方形中显示，并且其他图片的样式会被调整。