办法很简略
display：flex他们就能横着一行
而后data放两样货色，一个是你放图片的地址来6个，
一个是index（等会从第几个开始）
左侧按钮上一个
当按到0的时候就停在0那里
右侧按下一个
当图片的最初一个 等于 图片的最大值的时候就进行
next外面的那个i，起因是图片的第一个是0开始，而图片数量却是1开始所以才用Number减了1
<template> <div id="app"> <button @click="prev">《</button> <img :src="img[index]" style="width: 400px; height: 400px;" alt=""> <button @click="next">》</button> </div></template><script> export default { data() { return { img: [ require('./assets/01.jpg'), require('./assets/02.jpg'), require('./assets/03.jpg'), require('./assets/04.jpg'), require('./assets/05.jpg'), require('./assets/06.jpg') ], index: 0 } }, methods: { prev() { this.index == 0 ? this.index = 0 : this.index-- }, next() { var i = Number(this.img.length - 1) this.index == i ? this.index = i : this.index++ } } }</script><style lang="less"> *, a { transition: all .8s; } button { padding: 5px 10px; border: none; border: 1px solid #6b6b6b; background: #6b6b6b; color: #fff; } input { text-align: center; max-width: 40px; border: none; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 5px 10px; } #app { display: flex; }</style>