使用mint-ui的tabbar 选中时怎么修改图标

 <mt-tabbar v-model="selected" fixed>
    <mt-tab-item id="主页">
        <img slot="icon" v-if="!(selected=== '主页')" src="非选中时的图片">
        <img slot="icon" v-if="selected=== '主页'" src="选中的图片">
        主页
    </mt-tab-item>
    <mt-tab-item id="资讯">
        <img slot="icon" v-if="!(selected=== '资讯')" src="非选中时的图片">
        <img slot="icon" v-if="selected=== '资讯'" src="选中的图片">
        资讯
    </mt-tab-item>
    <mt-tab-item id="服务">
        <img slot="icon" v-if="!(selected=== '服务')" src="非选中时的图片">
        <img slot="icon" v-if="selected=== '服务'" src="选中的图片">
        服务
    </mt-tab-item>
    <mt-tab-item id="我的">
        <img slot="icon" v-if="!(selected=== '我的')" src="非选中时的图片">
        <img slot="icon" v-if="selected=== '我的'" src="选中的图片">
        我的
    </mt-tab-item>
</mt-tabbar>

然后在data中：    
data () {
  return {
    selected: '主页'
  }
}

比如你点击 “我的” 选项的时候，selected就等于  ’我的’ ，就--selected=== '"我的'为true，图就显示了