vue2.0中使用mint ui做底部选项卡切换

首先在vue2.0中webpack中下载 mint ui

然后再main.js引入

这样就可以使用mint ui里面的布局组件了
html部分（就是你要使用底部选项卡的部分）

<!--底部选项卡--><mt-tab-container v-model="selected">  <mt-tab-container-item id="one">        one  </mt-tab-container-item>  <mt-tab-container-item id="two">     two  </mt-tab-container-item>  <mt-tab-container-item id="three">    three  </mt-tab-container-item>  <mt-tab-container-item id="four">    four  </mt-tab-container-item></mt-tab-container>

<div class="bottom-bar">  <mt-tabbar v-model="selected">    <mt-tab-item id="one">      <img slot="icon" src="assets/logo.png">      外卖    </mt-tab-item>    <mt-tab-item id="two">      <img slot="icon" src="assets/logo.png">      订单    </mt-tab-item>    <mt-tab-item id="three">      <img slot="icon" src="assets/logo.png">      发现    </mt-tab-item>    <mt-tab-item id="four">      <img slot="icon" src="assets/logo.png">      我的    </mt-tab-item>  </mt-tabbar></div><!--底部选项卡-->

js部分

这样就可以使用了
值得一提的是官网的列子分开的如果复制合并会发现里面v-model =“”里面绑定的值不一样我们改成一样的在data里面申明就可以用了（不声明会报错）。

原文地址：https://www.cnblogs.com/yangjiansong/p/8297671.html

时间： 2024-08-05 04:16:58

vue2.0中使用mint ui做底部选项卡切换的相关文章

vue2.0 中#$emit,$on的使用详解

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. 1 vm.$emit( event, [-args] ) 触发当前实例上的事件.附加参数都会传给监听器回调. 例子: 1 //父组件 2 <template> 3 <ratingselect @select-type=&

vue2.0中使用sass

第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性,并且完全兼容CSS语法.Sass有助于保持大型样式表结构良好. Sass有两种语法. 一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾.在vue中,我们可以使用<style lan

vue2.0中router-link详解

vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已经被<router-link>组件替代了 <router-link>组件支持用户在具有路由功能的应用中点击导航.通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css

vue2.0开发自己的UI组件库

vue2.0开发自己的UI组件库这是博主自己正在操刀的一款基于vue的UI框架vzer-ui 大家喜欢的可以去github给一波关注. GitHub地址在线演示地址博主写的时候也不忘留下一个基础模板,供其他和我有共同兴趣的人一起研究下面是我的vzer-ui的一个基础模板,教程已经写在README.md了.博主感觉代码比较简单,不想解释了,实在看不懂就下方留言吧. vzer-ui-template 原文地址:https://www.cnblogs.com/zengjielin/p/1211

在vue2.0中没有dev-server.js下配置方法<转>

这篇文章主要介绍了vue2.0在没有dev-server.js下的本地数据配置方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下问题描述: 在vue2.0的以上的版本,vue-cli的build的文件夹下没有dev-server.js文件,那怎么配置mock数据 Vue2.x在build下的webpack.dev.conf.js配置就行 //在const portfinder = require(‘portfinder')后添加 const express = require('

vue2.0中的watch和计算属性computed

watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></

vue2.0中实现单选，全选，购物车加减计算等效果

<!doctype html><html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> &l

在Vue2.0中集成UEditor 富文本编辑器

在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp),下载地址. 下载之后,把资源放到 /static/ue/ 静态目录下.文档结构如下: (我把UEdi

vue2.0中v-on绑定自定义事件的理解

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码: 1 <div id="counter-event-example"> 2 <p>{{ total }}</p>