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

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

代码实例：

 

1

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

​

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

 

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

 

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

 

data数据：

 

1

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

 

实例函数操作：

 

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

 

以上就是 直播电商平台开发，vant Tab标签，更多内容欢迎关注之后的文章