关于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>