mint ui tab html,Vue Mint UI tabbar切换

1.引入mint-ui

1).使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

2). 部分引入

在main.js中写入：

import 'mint-ui/lib/style.css'

import { Tabbar, TabItem } from 'mint-ui';

2.引入tabbar

在main.js中写入：

Vue.component(Tabbar.name, Tabbar);

Vue.component(TabItem.name, TabItem);

vue中app.vue 和main.js的关联：

main.js是入口文件， 作用：初始化vue实例并使用需要的插件。

App.vue是主组件，所有页面都是在App.vue下进行切换的，所有的路由都是App.vue的子组件。

3.使用tabbar

html:

首页

分类

发现

购物车

我的

js:

export default {

name: 'home',

data () {

return {selected: '首页'}

},

watch: {

selected: function (val, oldVal) {

console.log(val)

// click后打印出当前mt-tab-item的id

}

}

}

效果：

tabbar.png