vue Visual Studio Code 实现横向手风琴效果的实现代码示例

在Vue.js和Visual Studio Code中实现横向手风琴（通常用于折叠内容展示）的效果，可以使用`v-if`或者`v-show`指令配合JavaScript来控制元素的显示隐藏。下面是一个简单的代码示例：

<template>
  <div class="accordion">
    <button v-for="(item, index) in items" :key="index" @click="toggle(index)">
      {{ item.title }}
      <i class="fa fa-chevron-right" :class="{ 'rotate-90': isOpen[index] }"></i>
    </button>
    <div v-for="(item, index) in items" :key="index" :style="{ display: isOpen[index] ? 'block' : 'none' }">
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1', content: 'Content for Item 1' },
        { title: 'Item 2', content: 'Content for Item 2' },
        { title: 'Item 3', content: 'Content for Item 3' }
      ],
      isOpen: Array.from({ length: this.items.length }, () => false)
    };
  },
  methods: {
    toggle(index) {
      this.isOpen[index] = !this.isOpen[index];
    }
  }
};
</script>

<style scoped>
.accordion button {
  cursor: pointer;
}
.rotate-90 {
  transform: rotate(90deg);
}
</style>

在这个例子中，我们有一个数组`items`存储每个手风琴项的内容，以及一个布尔数组`isOpen`记录哪些项是展开的。点击按钮时，对应的`isOpen`值会被切换，从而控制内容区的显示。