<!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;
/*border:2px solid pink;*/
}
.hideSty{
display: none;
}
.currentNav{
/* width:50px;
height:36px;*/
background-color: #5bc0de;
text-align: center;
/*line-height: 36px;*/
color:#fff;
font-size: 16px;
}
</style>
</head>
<body>
<div id="imgBg">
<div style="width:100%;height:40px;display: flex;border:1px solid pink;">
//判断点击哪个文字就把索引传入selectMennv方法,等于就添加文字的样式 遍历数组 填充图片文字说明
<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,//定义tab 和 图片容器的默认索引
currentStyle:'currentNav',//定义tab的样式
imgSty:"imgSty",//定义图片容器的显示的样式
imgHideSty:"hideSty",//定义图片容器默认隐藏
list:[{ //假数据 图片对象包括三个属性 id name 和 path
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>
vue简单选项卡
最新推荐文章于 2023-04-25 17:43:49 发布