vue页面里面实现tab切换的另一种方式

DOM层代码：

<ul class="tab-box">
              <li v-for="(title, index) in tabTitle"
              :key="index"
              @click="onTabElClick(index)"
              :class="curIndex === index ? 'active' : ''">
                {{ title }}
              </li>
            </ul>
        <div class="tab-content">
        <div v-for="(m,index) in tabMain" 
        v-show="curIndex=== 0">{{m}}</div>
         <div v-show="curIndex=== 1">yyy</div>
        </div>

CSS代码：

 .tab-box {
      float: right;
      li {
        display: inline-block;
        width: 82px;
        height: 20px;
        background: #ffffff;
        border: 1px solid #ccc;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
      }
      .active {
        background: #3195f9;
        color: #ffffff;
      }
    }

控制层：

<script>
export default {
  data() {
    return {
      curIndex: '0', // 默认选中第一个tab
      tabTitle: ['行政区划', '按流域']
      tabMain: ['内容一', '内容二', '内容三', '内容四'],
    }
  },
  components: {},
  methods: {
  // tab切换
    onTabElClick(index) {
      this.curIndex = index
    },
  }
}
</script>

在切换的时候我遇到了一个问题

 <div v-for="(m,index) in tabMain" 
        v-show="curIndex=== 0">{{m}}</div>
         <div v-show="curIndex=== 1">yyy</div>

要住意“=”和“”的区别，== 代表相同， =代表严格相同，这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行=比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.
我之前写的代码是：

` <div v-for="(m,index) in tabMain" 
        v-show="curIndex=='0'">{{m}}</div>
         <div v-show="curIndex=='1'">yyy</div>`

     可以切换
     但是当写成

<div v-for="(m,index) in tabMain" 
        v-show="curIndex=== '0'">{{m}}</div>
         <div v-show="curIndex=== '1'">yyy</div>

无法切换，一定要注意