我们在开发中,尤其是在移动端,像tab这种需求肯定是经常遇到,那么怎么简单的实现这么一个功能呢?
很多童鞋肯定会说着很简单,当点击的或者所在的页面图片换成点击效果的图片,然后每个部分复制一份,这样是可以实现,但是很麻烦。下面我介绍一种简单的实现一种更简单的方法
<template>
<ul class="nav">
<li v-for="(item,index)" in list :key="index" @click="tab(index)">
<img :src="item.clickImg" alt="logo' v-if="index===nowIndex">
<img :src="item.imgurl alt="logo' v-else>
<span>{
{item.name}}</span>
</li>
</ul>
</template>
<script>
import Weixin from './images/weixin.png'
import Weixins from './images/weixin-s.png'
import AddressBook from './images/addressBook .png'
import AddressBooks from './images/addressBook-s.png'
import Discover from './images/discover.png'
import Discovers from './images/discover-s.png'
import Mine from './images/mine.png'
import Mines from './images/mine-s.png'
export default{
data(){
return{
nowIndex:0,
list:[
{
name:"微信“,
imgUrl:Weixin ,
clickImg:Weixins
},
{
name:"通讯录“,
imgUrl:AddressBook ,
clickImg:AddressBooks
},
{
name:"发现“,
imgUrl:Discover ,
clickImg:Discovers
},
{
name:"我“,
imgUrl:Mine,
clickImg:Mines
}
]
}
},
methods:{
tab(index){
this.nowIndex=index
}
}
}
</script>