vue.js 下表图片切换
2018-09-15 本文已影响0人
王诺岚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="url" alt="">
<button v-on:click="wang(index)" v-for="(w,index) in img">{{index+1}}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
url:'img/1.jpg',
img:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']
},
methods:{
wang:function(ind){
this.url=this.img[ind]
}
}
})
</script>
</body>
</html>
