<template>
<div>
<div v-for="(i,index) in tabs" :key="index" @click="switchTba(index)" :class="i.up?'active':''">
<span>{{i.up?'上':'下'}}</span>
<span>{{i.label}}</span>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
tabs: [
{label: 'tab1', up: true},
{label: 'tab2', up: false},
{label: 'tab3', up: false},
]
}
},
methods: {
switchTba(index) {
this.tabs.forEach(v => {
v.up = false
})
this.tabs[index].up = true
}
}
}
</script>
<style scoped>
.active {
background: red;
}
</style>
点击的改变对应index的tab的箭头方向字段
最新推荐文章于 2020-12-19 14:28:18 发布