直播电商平台开发，vant Tab标签 什么是直播标签

直播电商平台开发，vant Tab标签

代码实例：

  <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 Tab标签，更多内容欢迎关注之后的文章