mui-ui tab-container

面板，可切换显示子页面。

官网的例子：

<mt-tab-container :active.sync="active">
  <mt-tab-container-item id="tab-container1">
    <mt-cell v-for="n in 10" :title="'tab-container1 ' + $index"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container2">
    <mt-cell v-for="n in 5" :title="'tab-container2 ' + $index"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container3">
    <mt-cell v-for="n in 7" :title="'tab-container3 ' + $index"></mt-cell>
  </mt-tab-container-item>
</mt-tab-container>

改变 ative 的值，与 <tab-container-item> 的 id 一致即显示对应页面。

自己在写的时候改变active的值并没有变化，可能是我不会用.sync吧，所以看了别人的博客应该这么写才有效果

<div id="app">
	<button @click="tab('tab-container1')">1</button>
	<button @click="tab('tab-container2')">2</button>
	<button @click="tab('tab-container3')">3</button>
	<mt-tab-container v-model="active">
		<mt-tab-container-item id="tab-container1">
			<mt-cell v-for="n,index in 10" 
				:key="index"
				:title="'tab-container1 ' + index"
			></mt-cell>
		</mt-tab-container-item>
		<mt-tab-container-item id="tab-container2">
			<mt-cell v-for="n,index in 5" 
				:key="index"
				:title="'tab-container2 ' + index"
			></mt-cell>
		</mt-tab-container-item>
		<mt-tab-container-item id="tab-container3">
			<mt-cell v-for="n,index in 7" 
				:key="index"
				:title="'tab-container3 ' + index"
			></mt-cell>
		</mt-tab-container-item>
	</mt-tab-container>
</div>

把:active.sync="active"改成了v-model="active",其实改变的是<mt-tab-container>的value值，但官网说是改变active的值，可能是我哪里没弄对吧，另外$index说是vue2.x已经废弃了，所以会报错的