面板,可切换显示子页面。
官网的例子:
<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已经废弃了,所以会报错的