vue3 写一个 默认展示三行文字 的展开收起

可以使用 Vue3 的动态绑定来实现展开收起的效果，代码如下：

<template>
  <div>
    <p v-if="!isShowAll">{{ text.slice(0, 3).join('\n') }}</p>
    <p v-else>{{ text.join('\n') }}</p>
    <button @click="toggleShow">
      {{ isShowAll ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const text = ref([
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "Ut rhoncus libero a nisl dictum, eu dapibus mauris imperdiet.",
      "Etiam auctor sapien sed velit tempus aliquet.",
      "Donec malesuada mauris vel semper dignissim.",
      "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
      "Sed at mi egestas, bibendum lorem nec, pellentesque felis.",
      "Maecenas scelerisque neque in ex placerat, in congue purus sodales.",
      "Donec non sapien in ipsum cursus efficitur nec non tortor."
    ]);
    const isShowAll = ref(false);

    const toggleShow = () => {
      isShowAll.value = !isShowAll.value;
    };

    return {
      text,
      isShowAll,
      toggleShow
    };
  }
};
</script>

在这个例子中，使用了 `ref` 函数来定义响应式变量 `text` 和 `isShowAll`，分别表示要展示的文本和是否展示全部文本。在模板中，使用了 `v-if` 和 `v-else` 来根据 `isShowAll` 的值来决定展示哪些内容，使用 `slice` 方法来截取前三行的文本。点击按钮时，调用 `toggleShow` 方法来切换 `isShowAll` 的值，从而实现展开收起的效果。