vue封装一个分段控制器组件示例代码
时间: 2023-10-29 19:00:44 浏览: 34
好的,以下是一个简单的 Vue 分段控制器组件示例代码:
```html
<template>
<div>
<div v-for="(section, index) in sections" :key="index" :class="['section-header', { active: activeIndex === index }]" @click="toggleSection(index)">
{{ section.title }}
</div>
<div v-for="(section, index) in sections" :key="index" class="section-content" v-show="activeIndex === index">
{{ section.content }}
</div>
</div>
</template>
<script>
export default {
props: {
sections: {
type: Array,
required: true,
},
},
data() {
return {
activeIndex: 0,
};
},
methods: {
toggleSection(index) {
this.activeIndex = index === this.activeIndex ? -1 : index;
},
},
};
</script>
```
希望能对您有所帮助!