关于vue.js:最简单的轮播图

办法很简略
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>