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

mint ui tab html,Vue Mint UI tabbar切换相关推荐

Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之二 vue 环境演示
前面说到如何整合spring boot 和vue进行前后端独立并行开发,今天讲解一下如何构建vue到开发环境 1. npm install 执行npm install命令安装依赖,前提是安装npm ...
element ui html编辑器,Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
layui模仿element ui_比较受欢迎的前端 UI 框架【vue】
PC端 UI 框架一.ElementUI 官网地址:https://element.eleme.cn/#/zh-CN Github:https://github.com/ElementUI/elem ...
vue前端UI框架整理
整理的vue前端UI框架. PC端: 1.Elementi:一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. 2.iView:一套基于 Vue.js 的开源 UI 组件库,主 ...
Vue UI组件库以及 Element UI 使用
Vue UI组件库以及 Element UI 使用 1. Vue UI 组件库 1.1 移动端常用 UI 组件库 1.2 PC 端常用 UI 组件库 2. Element UI 2.1 安装 2.2 ...
排名前10的vue前端UI框架框架值得你掌握
https://segmentfault.com/a/1190000015423178?utm_source=tag-newest vue常用ui框架推荐 pc: • element-ui (star ...
Vue.js UI框架比较
Vue 是什么? Vue.js 是 Evan You 开发的渐进式 JavaScript 框架.开发者能够通过撰写 *.vue 文件,基于 <template>, <style> ...

mint ui tab html,Vue Mint UI tabbar切换

mint ui tab html,Vue Mint UI tabbar切换相关推荐

最新文章

热门文章