图片切换-vue


    <style type="text/css">
    img{
         300px;
        height: 300px;
    }
    </style>

<body>
    <div id="d">
        <button id="b1" @click="pre" v-show="index>0"><</button>
        <img :src="rimage[index]">
        <button id="b2" @click="next" v-show="index<rimage.length-1">></button>
    </div>
    <script src="../vue.js"></script>
    <script type="text/javascript">
    var app=new Vue({
    el:"#d",
    data:{
        rimage:[
            "image/1.jpg",
            "image/2.jpg",
            "image/3.jpg",
            "image/4.jpg",
            "image/5.jpg",
        ],
        index:0
    },
    methods: {
        pre:function(){
            this.index--;
        },
        next:function(){
            this.index++;
        }
    }
    })
    </script>
</body>