图片切换：
1.列表数据使用数组保存
2.v-bind指令可以设置元素属性，比如src
3.v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
<body>
<div id="app">
<img :src="imgArr[index]" alt="">
<a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left">
<img src="左.png" alt="">
</a>
<a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">
<img src="右.png" alt="">
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
imgArr:[
"00.jpg",
"01.jpg",
"02.jpg",
"03.jpg",
"04.jpg",
],
index :0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>
网友评论