<style type="text/css">
img{
width: 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>