|
效果：点击相对应的图片编号显示该图片,随机切换 
css: 1.list-style: none;//去除列表默认小点 2.display: none;//图片初始都为隐藏 3.添加选中的名字的样式active 4.添加当前选中图片显示display: block;
js: 1.利用遍历数组的对象添加相应名称和图片{{item.title}} ![]() （属性绑定：） *2.设置选项卡当前索引currentIndex,通过列表点击，绑定事件change，改变选项卡当前索引与图片索引一致，再判断是否为当前选中项:class="currentIndex == index? 'active' : '' "绑定属性
.tab ul li.active{
background-color: rgb(32, 218, 218);
}
.tab ul{
overflow: hidden;
}
li{
font-size: 30px;
padding: 8px;
margin: 0px 5px;
border: 2px solid blue;
float: left;
list-style: none;
}
.tab div{
display: none;
}
.tab div.current{
display: block;
}
{{item.title}}
var vm = new Vue({
el:'#app',
data:{
currentIndex:0,//选项卡当前的索引
list:[{
id:1,
title:"1",
path:"./img/1.png"
},
{
id:2,
title:"2",
path:"./img/2.png"
},
{
id:3,
title:"3",
path:"./img/3.png"
}
]
},
methods:{
change:function(index){
//实现选项卡切换操作：本质就是操作类名
this.currentIndex = index;
}
}
});
|