<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<style>
#imgBg{
width:100%;
}
.imgSty{
width:400px;
height:400px;
display: block;
}
.hideSty{
display: none;
}
.currentNav{
background-color: #5bc0de;
text-align: center;
color:#fff;
font-size: 16px;
}
</style>
</head>
<body>
<div id="imgBg">
<div style="width:100%;height:40px;display: flex;border:1px solid pink;">
<p :class="currentIndex == index?currentStyle:''" :key="item.id" v-for="(item,index) in list" @click="selectMeinv(index)">{{item.name}}</p>
</div>
<div :class="currentIndex == index?imgSty:imgHideSty" :key="item.id" v-for="(item,index) in list">
<img :src="item.srcString" alt="" class="imgSty">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#imgBg",
data:{
currentIndex:0,
currentStyle:'currentNav',
imgSty:"imgSty",
imgHideSty:"hideSty",
list:[{
id:1,
name:"美女1",
srcString:"./img/mn1.jpg",
},{
id:2,
name:"美女2",
srcString:"./img/mn2.jpg",
},{
id:3,
name:"美女3",
srcString:"./img/timg.jpg",
}]
},
methods:{
test:function(){
},
selectMeinv(i){
console.log(i);
this.currentIndex = i;
}
}
})
</script>
</html>
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
