1.用v-bind切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- u-bind:绑定一个属性，简写 ：属性名=""-->
<div class="itany">
<img v-bind:src="url" v-on:click="atl">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
url:"img/a.jpg",
flag:true
},
methods:{
atl:function(){
if(this.flag){
this.url="img/b.jpg";
this.flag=false;
}
else{
this.url="img/a.jpg";
this.flag=true;
}
}
}
})
</script>
</body>
</html>
2.用v-show制作选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
overflow: hidden;
}
li{
float: left;
width: 60px;
border: 1px solid black;
text-align: center;
list-style: none;
cursor: pointer
}
</style>
</head>
<body>
<div class="itany">
<img v-bind:src="url" v-on:click="alt">
<ul>
<li v-for="(val,index) in list" v-on:click="alt(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
url:"img/img8.jpg",
list:["img/img8.jpg","img/img9.jpg","img/img10.jpg","img/img11.jpg","img/img12.jpg"]
},
methods:{
alt:function(ind){
this.url=this.list[ind]
}
}
})
</script>
</body>
</html>
网友评论