做这个效果就是把，今天和昨天所学的v-bind，v-for="(val,index) in arr"联系到一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
width: 100px;
border: 1px solid #000;
text-align: center;
}
img{
width:510px;
height: 300px;
}
</style>
</head>
<body>
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for="(val,index) in arr" v-on:click="alt(index)">{{index+1}}</li>//对应图片的按钮用index来写，相当于跟下边的数组是有关系的
</ul>
</div>
<script src="dist/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'],//要切换的图片放到一个数组里
},
methods:{//用来写函数
alt:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
</body>
</html>
网友评论