Vue-webapp 中的坑 使用Mint UI tabbar 点击之后图片改变的方法

vue-webapp 中的坑 （mint-ui很坑的，需要注意）Mint UI tabbar 点击之后图片改变的方法

下图就是Mint UI的tabbar组件代码 

htm代码：

<template>

<mt-tabbar v-model="tabBar" fixed>

<mt-tab-item id="Invest" @click.native="showInvest">

<router-link to="/" style=" text-decoration: none; color: #989898;">

<img src="../assets/ios/icon/Investment@2x.png" v-show="isshow">

<img src="../assets/ios/icon/Investment-1@2x.png" v-show="is_show">

投资

</router-link>

</mt-tab-item>

<mt-tab-item id="fllow" @click.native="showFllow">

<img src="../assets/ios/icon/follow@2x.png" v-show="isshow1">

<img src="../assets/ios/icon/follow-1@2x.png" v-show="is_show1">

关注

</mt-tab-item>

<mt-tab-item id="person" @click.native="showPerson">

<router-link to="/Login" style=" text-decoration: none; color: #989898;">

<img src="../assets/ios/icon/person@2x.png" v-show="isshow2">

<img src="../assets/ios/icon/person-1@2x.png" v-show="is_show2">

我的

</router-link>

</mt-tab-item>

</mt-tabbar>

</template>

js组件代码：

<script>

export default {

name: 'tabBar',

data() {

return {

tabBar: 'Invest',

selected:'',

isshow:false,

is_show:true,

isshow1:true,

is_show1:false,

isshow2:true,

is_show2:false,

};

},

methods: {

showInvest:function(){

this.isshow=false;

this.is_show=!this.isshow;

this.$options.methods.UnshowFllow.bind(this)();

this.$options.methods.UnshowPerson.bind(this)();

},

showFllow:function(){

this.isshow1=false;

this.is_show1=true;

this.$options.methods.UnshowInvest.bind(this)();

this.$options.methods.UnshowPerson.bind(this)();

},

showPerson:function(){

this.isshow2=false;

this.is_show2=true;

this.$options.methods.UnshowInvest.bind(this)();

this.$options.methods.UnshowFllow.bind(this)();

},

UnshowInvest:function(){

this.isshow=true;

this.is_show=false;

},

UnshowFllow:function(){

this.isshow1=true;

this.is_show1=false;

},

UnshowPerson:function(){

this.isshow2=true;

this.is_show2=false;

}

},



}

</script>

css组件样式代码：

/* 底部tabbar */

.footer .mint-tabbar {

background-color: #fff;

}

.footer .mint-tabbar.is-fixed {

height: 4.9rem;

line-height: 4.9rem;

border-top: 1px solid #e4e4e4;

}

.footer .mint-tab-item {

margin-top: 0.8rem;

}

.footer .mint-tab-item-label {

color: #989898;

font-size: 1rem;

font-weight: normal;

line-height: 1;

}

.footer img {

width: 2rem;

height: 2rem;

font-size: 2rem;

display: block;

margin: 0 auto;

margin-bottom: 0.45rem;

}

.footer .mint-tabbar > .mint-tab-item.is-selected {

background-color: #fff;

}

.footer .is-selected .mint-tab-item-label {

color: #ec4748;

}

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140