多行文本点击查看全部与收起 CSS样式

<template>
  <div id="app">
    <!-- 文本内容部分 -->
    <div id="box">
      <ul>
        <li v-for="(item, i) in arr" :key="i">{{ item.text }}</li>
      </ul>
    </div>
    <!-- 点击查看 收起部分 -->
    <div>
      <p @click="showdiv()" v-show="flag">查看全部</p>
      <p @click="hidediv()" v-show="!flag">收起</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          text: "假如生活欺骗了你1"
        },
        {
          text: "假如生活欺骗了你2"
        },
        {
          text: "假如生活欺骗了你3"
        },
        {
          text: "假如生活欺骗了你4"
        },
        {
          text: "假如生活欺骗了你5"
        },
        {
          text: "假如生活欺骗了你6"
        },
        {
          text: "假如生活欺骗了你7"
        },
        {
          text: "假如生活欺骗了你8"
        }
      ],

      flag: true
    };
  },
  methods: {
    showdiv() {
      document.getElementById("box").style.height = "auto";
      this.flag = !this.flag;
    },
    hidediv() {
      document.getElementById("box").style.height = "100px";
      this.flag = !this.flag;
    }
  }
};
</script>

<style>
#box {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background-color: pink;
}
</style>