vue 使用mint-ui组件中的Tabbar监听点击事件
vue 2017-09-19 11:10:10

 

 

PHP Code复制内容到剪贴板
  1. <template>  
  2.     <div class="footer">  
  3.         <h1>{{ msg }}</h1>  
  4.   
  5.         <p>当前选中的菜单是：{{selected}}</p>  
  6.   
  7.         <mt-tabbar v-model="selected" fixed>  
  8.   
  9.             <mt-tab-item id="learning-classification">  
  10.                 <div class="mint-tab-item-icon">  
  11.                     <i class="icon iconfont"></i>  
  12.                 </div>  
  13.                 学习分类  
  14.             </mt-tab-item>  
  15.   
  16.             <mt-tab-item id="学习阶段">  
  17.                 <div class="mint-tab-item-icon">  
  18.                     <i class="icon iconfont"></i>  
  19.                 </div>  
  20.                 学习阶段  
  21.             </mt-tab-item>  
  22.             <mt-tab-item id="学习本">  
  23.                 <div class="mint-tab-item-icon">  
  24.                     <i class="icon iconfont"></i>  
  25.                 </div>  
  26.                 学习本  
  27.             </mt-tab-item>  
  28.             <mt-tab-item id="我的">  
  29.                 <div class="mint-tab-item-icon">  
  30.                     <i class="icon iconfont"></i>  
  31.                 </div>  
  32.                 我的  
  33.             </mt-tab-item>  
  34.         </mt-tabbar>  
  35.   
  36.     </div>  
  37. </template>  
  38.   
  39. <script>  
  40.     export default {  
  41.         name: 'footer',  
  42.         data() {  
  43.             return {  
  44.                 msg: '底部',  
  45.                 selected: 'learning-classification',  
  46.             }  
  47.         },  
  48.         watch: { // 这里放方法，方法之间用逗号隔开  
  49.             selected: function (val, oldVal) {  
  50.                 // 这里就可以通过 val 的值变更来确定  
  51.                 console.log(val)  
  52.             },  
  53. //            toRoute: function (val, oldVal) {  
  54. //                // 这里就可以通过 val 的值变更来确定去向  
  55. //                switch(val){  
  56. //                    case 'learning-classification':  
  57. //  
  58. //                        this.$router.push('/mainpage');  
  59. //                        break;  
  60. //                    case 'ShoppingList':  
  61. //                        this.$router.push('/shoppinglist');  
  62. //                        break;  
  63. //                    case 'GroupList':  
  64. //                        this.$router.push('/grouplist');  
  65. //                        break;  
  66. //                    case 'UserCenter':  
  67. //                        this.$router.push('/usercenter');  
  68. //                        break;  
  69. //                }  
  70. //            }  
  71.         }  
  72.     }  
  73. </script>  

 

本文来自于：http://www.yoyo88.cn/study/vue/151.html

上一篇 vue中整合mint-ui后打包项目 报css错误的问题
下一篇 components组件传自定义参数
相关的文章
Powered by yoyo苏ICP备15045725号