(在标签指定 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',
};
},
};
效果展示