首先，mt-tab-item不支持v-for
<mt-tab-item v-for="(item,key) in list" :key="key" id="item.title">{{item.title}}</mt-tab-item>能正常显示导航，但点击任何一个菜单，都会全部选中，所以只能像例子一样，一个个写。
其次，如果需要同时选择图片，应该这么写
<template>
<div id="tab-bar">
<mt-tabbar v-model="selected" v-show="isShow" fixed>
<mt-tab-item id="main">
<img :src="selected === img1.title? img1.url1: img1.url0" slot="icon">首页
</mt-tab-item>
<mt-tab-item id="focus">
<img :src="selected === img3.title? img3.url1: img3.url0" slot="icon">我的关注
</mt-tab-item>
<mt-tab-item id="todolist">
<img :src="selected === img7.title? img7.url1: img7.url0" slot="icon">待办事项
</mt-tab-item>
<mt-tab-item id="my">
<img :src="selected === img9.title? img9.url1: img9.url0" slot="icon">我的
</mt-tab-item>
</mt-tabbar>
</div>
</template>
<style>
</style>
<script>
import * as types from '../store/mutation-types'
export default {
data(){
return {
selected: sessionStorage.getItem('selected') || 'main',
img1: {title: 'main', url0: require("../assets/tool/home.png"), url1: require("../assets/tool/home_selected.png")},
img3: {title: 'focus', url0: require("../assets/tool/focus.png"), url1: require('../assets/tool/focus_selected.png')},
img7: {title: 'todolist', url0: require("../assets/todolist/todolist.png"), url1: require("../assets/todolist/todolist_selected.png")},
img9: {title: 'my', url0: require("../assets/tool/user.png"), url1: require("../assets/tool/user_selected.png")}
}
},
computed: {
isShow: function () {
return this.$store.state.footerVisible;
}
},
watch: {
'selected': {
handler() {
switch (this.selected) {
case 'main':
this.$router.push('/main')
this.$store.commit(types.SELECT_FOOTER_TAB, 'main')
break
case 'focus':
this.$router.push('/focus')
this.$store.commit(types.SELECT_FOOTER_TAB, 'focus')
break
case 'todolist':
this.$router.push('/todolist')
this.$store.commit(types.SELECT_FOOTER_TAB, 'todolist')
break
case 'my':
this.$router.push('/my')
this.$store.commit(types.SELECT_FOOTER_TAB, 'my')
break
}
}
}
}
}
</script>