vue[自定义tab切换功能]

vue自定义tab切换的功能需要考虑到vue数据分离的特殊形式，但是其实现方式并不难。
代码示例：

<template>
<div>	
	 <div class="tab">
	   <div class="tab-item" :class="isTabActive == 0 ? 'is-active' : ''" @click="clickTab(0)">消火栓</div>
	   <div class="tab-item" :class="isTabActive == 1 ? 'is-active' : ''" @click="clickTab(1)">水箱水池</div>
	   <div class="tab-item" :class="isTabActive == 2 ? 'is-active' : ''" @click="clickTab(2)">水泵</div>
	 </div>
	 <div class='tab-body'>
	 	<!-- 这里可以加入一些动画之类的切换特效 -->
	 	<div class='tab-item1' v-show='isTabActive==0'>消火栓的内容</div>	
	 	<div class='tab-item1' v-show='isTabActive==1'>水箱水池的内容</div>	
	 	<div class='tab-item1' v-show='isTabActive==2'>水泵的内容</div>
	 </div>
 </div>
</template>
<script>
export default {
  data(){
    return{
      isTabActive:0 // 控制切换的变量
    };
  },
  methods:{
  	//切换操作
    clickTab(number){
      this.isTabActive = number;
    }
  }
};
</script>
<style>
</style>