vant Tab标签

（在标签指定 name 属性的情况下，v-model 的值为当前标签的 name（此时无法通过索引值来匹配标签））

代码实例：

  <van-tabs  v-model="active" type="card"    @change="orderChange" color="#6fb3e0" >
      <van-tab  v-for="(tabItem, index) in tab" :title="tabItem.title"  :name="tabItem.name"  :key="index" >
        <template #title :name="tabItem.name">{{ tabItem.title }}
          <van-icon  v-if=" tabItem.title == '用户工单' && count.length != 0 && count[0].dmkCount > 0 " :badge="count[0].dmkCount" />
            <van-icon  v-if=" tabItem.title == '用户工单' && count.length != 0 && count[0].dmkCount > 0 " :badge="count[0].dmkCount" />
              <van-icon  v-if=" tabItem.title == '用户工单' && count.length != 0 && count[0].dmkCount > 0 " :badge="count[0].dmkCount" />
        </template>
      </van-tab>
    </van-tabs>

当van-tabs里写了v-model="active自定义变量"，又在van-tab写了：name="自定义变量"时，name可写成v-bind形式

直接操作v-model的自定义变量会失效，

这时需要 把name赋给v-model的自定义变量active

data数据：

 data() {
    return {
      tab: [
        {
          title: "用户工单",
          name: "1",
          page: 0,
          orderList: [],
          finished: false,
          url: "/api/Feedback/dmkShow",
        },
        {
          title: "员工工单",
          name: "2",
          page: 0,
          orderList: [],
          finished: false,
          url: "/api/Feedback/oaShow",
        },
        {
          title: "我的工单",
          name: "3",
          page: 0,
          orderList: [],
          finished: false,
          url: "/api/Feedback/mySolveFeedback",
        },
      ],
}
}

实例函数操作：

 orderChange(name) {
      this.active = name;
    console.log('测试name',name,'测试active',this.active)
}

 官方文档：Vant 2 - Mobile UI Components built on Vue

并没太过详细记载name

官方实例代码

<van-tabs v-model="activeName">
  <van-tab title="标签 1" name="a">内容 1</van-tab>
  <van-tab title="标签 2" name="b">内容 2</van-tab>
  <van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>

export default {
  data() {
    return {
      activeName: 'a',
    };
  },
};

效果展示