vue组件实现Tab切换功能

来源：互联网发布：淘宝要怎么重新注册编辑：程序博客网时间：2024/05/21 12:50

方法一：

http://www.jianshu.com/p/5757e2198304

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <title>Demo</title>    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js"></script></head><body>    <div id="app">        <div :is="tabShow"></div>        <button @click="tab('A')">tab1</button>        <button @click="tab('B')">tab2</button>        <button @click="tab('C')">tab3</button>        <button @click="tab('D')">tab4</button>    </div>          <script>      A = {        template:`<h1>我是第一一一个tab</h1>`      }      B = {        template:`<h1>我是第二二二个tab</h1>`      }      C = {        template:`<h1>我是第三三三个tab</h1>`      }      D = {        template:`<h1>我是第四四四个tab</h1>`      }      new Vue({        el:'#app',        data(){          return {            tabShow:'A'          }        },        components:{            'A': A,            'B': B,            'C': C,            'D': D        },        methods:{            tab(currentShowTab){                this.tabShow = currentShowTab;            }        }      })    </script></body></html>

方法二：

mint ui tabContainer的应用

<mt-navbar v-model="selectedVal">    <mt-tab-item id="1" @click.native.prevent="active = 'tab-container1'">      <img slot="icon" v-bind:src="wjxselIcon" v-if="addBrowseCountQues > 0" />      问题    </mt-tab-item>    <mt-tab-item id="2" @click.native.prevent="active = 'tab-container2'">      <img slot="icon" v-bind:src="wjxselIcon" v-if="addAns > 0" />      回答    </mt-tab-item>    <mt-tab-item id="3" @click.native.prevent="active = 'tab-container3'">      <img slot="icon" v-bind:src="wjxselIcon" v-if="addAtt > 0"/>      关注    </mt-tab-item>    <mt-tab-item id="4" @click.native.prevent="active = 'tab-container4'">      <img slot="icon" v-bind:src="wjxselIcon" v-if="addreplyCom > 0"/>      评论    </mt-tab-item>  </mt-navbar></div><!--<div :is="tabShow" @swipeVal="selected"></div>--><div class="page-tab-container" id="page-tab-container">  <mt-tab-container class="page-tabbar-tab-container" v-model="active" :swipeable="true" >    <mt-tab-container-item id="tab-container1">      <myQuestions @swipeVal="selected"></myQuestions>    </mt-tab-container-item>    <mt-tab-container-item id="tab-container2">      <myAnswers @swipeVal="selected"></myAnswers>    </mt-tab-container-item>    <mt-tab-container-item id="tab-container3">      <myAttentions @swipeVal="selected"></myAttentions>    </mt-tab-container-item>    <mt-tab-container-item id="tab-container4">      <myComments @swipeVal="selected"></myComments>    </mt-tab-container-item>  </mt-tab-container></div>

iniSelecVal: function () {  if (localStorage.selectedVal) {    this.selectedVal = localStorage.selectedVal  } else {    this.selectedVal = '1'    localStorage.selectedVal = '1'  }},routeClick: function () {  this.$router.push({'name': 'mainPage'})  localStorage.selectedVal = '1'},selected: function (res) {  this.selectedVal = res},

watch: {  selectedVal: function (val, oldval) {    var self = this    localStorage.selectedVal = val    if (val === '1') {      self.active = 'tab-container1'      // self.tabShow = 'myQuestions'    } else if (val === '2') {      self.active = 'tab-container2'      // self.tabShow = 'myAnswers'    } else if (val === '3') {      self.active = 'tab-container3'      // self.tabShow = 'myAttentions'    } else if (val === '4') {      self.active = 'tab-container4'      // self.tabShow = 'myComments'    } else if (val === 'undefined') {      self.active = 'tab-container1'      // self.tabShow = 'myQuestions'    }  }}

阅读全文

0 0