vue实现选项卡效果:
1.页面布局代码:
<div id="app">
<div class="tab">
<ul>
<li v-on:click="change(index)" :class="currentIndex==index?'active':''" :key="item.id"
v-for="(item,index) in list">{{item.title}}</li>
</ul>
<div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list">
<img :src="item.path">
</div>
</div>
</div>
这里的tab选项卡是一个无序列表,列表内容通过v-for
指令遍历Vue实例中的列表数据进行渲染。
2.css样式部分代码
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid blue;
border-right: 1px solid blue;
cursor: pointer;
}
.tab ul li:first-child {
border-left: 1px solid blue;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0px;
}
.tab div.current {
display: block;
}
.tab div img {
width: 500px;
height: 300px;
}
</style>
3.<script></script>
部分代码
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
currentIndex: 0,
list: [{
id: 1,
title: "自来也",
path: "images/jiraiya.jpg"
}, {
id: 2,
title: "卡卡西",
path: "images/kakashi.jpg"
}, {
id: 3,
title: "鸣人",
path: "images/naruto.jpg"
}]
},
methods: {
change: function (index) {
// console.log(index);
this.currentIndex = index;
}
}
});
</script>
(1)点击选项卡列表的每一项,也就是每一个小li
,会调用change(index)
方法,并将该li
的index
传递给change(index)
方法。
(2)在change(index)
方法内部将拿到的index
赋值给data
对象的currentIndex
变量。
(3)在每个小li
上通过:class
绑定被点击时的样式为active
,设置被点击的选项卡背景色为orange
,否则样式为空。
(4)在下部分展示图片的div
区域,通过:class
绑定与li
的索引相同时样式为current
,设置当前要显示的图片div
的display
属性为block
,从而显示当前选项卡对应的图片;其他图片的样式为display:none
,被隐藏。
小结:
- 使用了
:class
样式绑定 - 使用
v-for
遍历数组