En nuestro desarrollo, especialmente en el terminal móvil, un requisito como la pestaña debe encontrarse con frecuencia, entonces, ¿cómo podemos simplemente implementar tal función?
Muchos zapatos para niños ciertamente dirán que es muy simple, cuando la imagen de la página en la que se hizo clic o en la ubicación se reemplaza con una imagen de efecto en la que se hizo clic, y luego se copia cada parte, esto se puede lograr, pero es muy problemático. A continuación presento una implementación simple de un método más simple
<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>