v-on:click=‘handle(index)’ 点击事件实现切换功能并且传参
v-bind:class='currentIndex==index?“active”:""'利用三目运算符判断生命的currentIndex是否等于index 如果等于就给li标签添加active样式 如果不等于则为空
< div id = " app" >
< div class = " tab" >
< ul>
< li v-on: click= ' handle(index)' v-bind: class= ' currentIndex==index?" active" :" " ' v-bind: key= ' item.id' v-for = ' (item,index) in list' > {
{item.title}}</ li>
</ ul>
< div v-for = ' (item,index) in list' v-bind: class= ' currentIndex==index?" current" :" " ' >
< img :key = ' item.id' :src = " item.path" alt = " " >
</ div>
</ div>
</ div>
var vm = new Vue ( {
el: '#app' ,
data: {
currentIndex: 0 ,
list: [ {
id: 1 ,
title: 'apple' ,
path: 'images/apple.jpg'
} , {
id: 2 ,
title: 'orange' ,
path: 'images/orange.jpg'
} , {
id: 3 ,
title: 'lemon' ,
path: 'images/lemon.jpg'
} ]
} ,
methods: {
handle: function ( index) {
this . currentIndex= index;
}
}
} ) ;
img {
width : 100%;
height : 100%;
}
.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 : 298px;
height : 298px;
display : none;
text-align : center;
font-size : 30px;
line-height : 300px;
border : 1px solid blue;
border-top : 0px;
}
.tab div.current {
display : block;
}
效果