请用vue2+js自定义写出点击展开和收起效果的方框,用最简单的一种,请帮我用代码写出来并展示效果

当然可以，下面是示例代码和效果：

<template>
  <div class="container">
    <div class="header" @click="toggleContent">
      <h3>Title</h3>
      <span>{{ expanded ? '收起' : '展开' }}</span>
    </div>
    <div class="content" v-show="expanded">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt sem eros, vitae vulputate ante mattis at. Mauris tincidunt volutpat libero eget rutrum. Donec vel odio non diam vestibulum posuere. Phasellus quis massa sem. Aenean tincidunt massa vel nulla consequat, eget consequat enim eleifend.
    </div>
  </div>
</template>

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

<style scoped>
.container {
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
}
.header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
</style>

效果：