```html
<div class="demo-block" id="tab-demo1">
  <lx-tab>
    <lx-tab-item
      :selected="demo1 === '已发货'"
      @click.native="demo1 = '已发货'"
    >
      已发货
    </lx-tab-item>
    <lx-tab-item
      :selected="demo1 === '未发货'"
      @click.native="demo1 = '未发货'"
    >
      未发货
    </lx-tab-item>
    <lx-tab-item
      :selected="demo1 === '全部订单'"
      @click.native="demo1 = '全部订单'"
    >
      全部订单
    </lx-tab-item>
  </lx-tab>
  <br>
  <br>
  <br>
  <lx-divider>different active class</lx-divider>
  <lx-tab :animate="false">
    <lx-tab-item
      active-class="active-6-1"
      :selected="demo6 === '已发货'"
      @click.native="demo6 = '已发货'"
    >
      已发货
    </lx-tab-item>
    <lx-tab-item
      active-class="active-6-2"
      :selected="demo6 === '未发货'"
      @click.native="demo6 = '未发货'"
    >
      未发货
    </lx-tab-item>
    <lx-tab-item
      active-class="active-6-3"
      :selected="demo6 === '全部订单'"
      @click.native="demo6 = '全部订单'"
    >
      全部订单
    </lx-tab-item>
  </lx-tab>
  <br>
  <br>
  <br>
  <lx-divider>no animation</lx-divider>
  <lx-tab :animate="false">
    <lx-tab-item
      :selected="demo5 === '已发货'"
      @click.native="demo5 = '已发货'"
    >
      已发货
    </lx-tab-item>
    <lx-tab-item
      :selected="demo5 === '未发货'"
      @click.native="demo5 = '未发货'"
    >
      未发货
    </lx-tab-item>
    <lx-tab-item
      :selected="demo5 === '全部订单'"
      @click.native="demo5 = '全部订单'"
    >
      全部订单
    </lx-tab-item>
  </lx-tab>
  <br>
  <br>
  <br>
  <lx-divider>disabled</lx-divider>
  <lx-tab>
    <lx-tab-item
      :selected="demoDisabled === 'A'"
      @click.native="demoDisabled = 'A'"
    >
      A
    </lx-tab-item>
    <lx-tab-item
      :selected="demoDisabled === 'B'"
      @click.native="demoDisabled = 'B'"
    >
      B
    </lx-tab-item>
    <lx-tab-item
      :selected="demoDisabled === 'Disabled'"
      disabled
      style="color:#ececec;"
    >
      Disabled
    </lx-tab-item>
  </lx-tab>
  <br>
  <br>
  <br>
  <lx-tab
    :line-width="2"
    active-color="#fc378c"
    :index.sync="index"
  >
    <lx-tab-item
      v-for="item in list2"
      :key="item"
      class="vux-center"
      :selected="demo2 === item"
      @click.native="demo2 = item"
    >
      {{ item }}
    </lx-tab-item>
  </lx-tab>
  <lx-swiper
    :index.sync="index"
    height="100px"
    :show-dots="false"
  >
    <lx-swiper-item
      v-for="item in list2"
      :key="item"
    >
      <div class="tab-swiper vux-center">
        {{ item }} Container
      </div>
    </lx-swiper-item>
  </lx-swiper>
  <br>
  <lx-x-button
    :disabled="list2.length === 5"
    type="primary"
    @click.native="addTab"
  >
    Add tab item
  </lx-x-button>
  <lx-x-button
    :disabled="list2.length <= 2"
    type="primary"
    @click.native="removeTab"
  >
    Remove tab item
  </lx-x-button>
  <lx-x-button
    type="primary"
    @click.native="next"
  >
    Active next current: {{ index }}
  </lx-x-button>
  <lx-x-button
    type="primary"
    @click.native="prev"
  >
    Active prev current: {{ index }}
  </lx-x-button>
  <br>
  <br>
  <lx-tab :line-width="2">
    <lx-tab-item
      v-for="item in list3"
      :key="item"
      :selected="demo3 === item"
      :class="{'vux-1px-r': index===0}"
      @click.native="demo3 = item"
    >
      {{ item }}
    </lx-tab-item>
  </lx-tab>
  <br>
  <br>
  <br>
  <lx-sticky>
    <lx-tab :line-width="1">
      <lx-tab-item
        v-for="item in list4"
        :key="item"
        :selected="demo4 === item"
        @click.native="demo4 = item"
      >
        {{ item }}
      </lx-tab-item>
    </lx-tab>
  </lx-sticky>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>


<script>
// Tab.md
const list = () => ['精选', '美食', '电影', '酒店', '外卖']

new Vue({
  el: '#tab-demo1',
  
  data: {
    demo1: '未发货',
    list2: list(),
    demo5: '未发货',
    demo2: '美食',
    list3: ['收到的消息', '发出的消息'],
    demo3: '收到的消息',
    list4: ['正在正映', '即将上映'],
    demo4: '即将上映',
    demo6: '未发货',
    demoDisabled: 'A',
    index: 0
  },
  methods: {
    addTab () {
      if (this.list2.length < 5) {
        this.list2 = list().slice(0, this.list2.length + 1)
      }
    },
    removeTab () {
      if (this.list2.length > 1) {
        this.list2 = list().slice(0, this.list2.length - 1)
      }
    },
    next () {
      if (this.index === this.list2.length - 1) {
        this.index = 0
      } else {
        ++this.index
      }
    },
    prev () {
      if (this.index === 0) {
        this.index = this.list2.length - 1
      } else {
        --this.index
      }
    }
  }
})
</script>

<style>
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
</style>
```