vue +elementul实现展开和收起功能

vue和element-ui库提供的element-UI组件可以很容易地实现展开和收起功能。

首先，我们可以使用element-ui的Collapse组件来创建一个可收缩的容器。在需要收起和展开的元素外面包裹一个<Collapse>标签，在其中添加<CollapseItem>标签作为子组件。例如，我们可以像下面这样定义一个简单的容器：

<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="点击展开内容" name="1">
        <p>这是展开的内容</p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

在这个例子中，点击标题的时候，内容会展开或者收起。

此外，我们还可以用element-ui的按钮组件<Button>来实现展开和收起的功能。我们可以在按钮的click事件中，通过改变一个data中的boolean值来控制展开和收起。例如：

<template>
  <div>
    <el-button @click="toggleCollapse" type="primary">{{ isCollapse ? '展开' : '收起' }}</el-button>
    <el-collapse v-model="isCollapse">
      <el-collapse-item title="内容" name="1">
        <p>这是展开的内容</p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

在这个例子中，点击按钮会切换展开和收起状态，并且按钮上的文本也会相应地改变。

综上所述，借助于vue和element-ui的组件，我们可以轻松地实现展开和收起功能。通过Collapse组件或者按钮组件，我们可以根据具体需求选择合适的方式来实现。