Vue点击展开和收起详情功能

#最近项目中有个需求，内容过多时折叠，点击按钮展开全部，在网上搜了一下没找到合适的，于是自己就结合了一下，手写了一个，功能如下（功能基于Vue）：

## 点击展开收起功能

功能实现：

// html
<div :class="isOpen ? 'new_detail' : 'default'">
     <span class="font999">公司简介：</span>
     上证所信息网络有限公司（SSE INFONET CO.,LTD）成立于 2003年1月，是由上海证券交易所（SSE）出资设立的全资子公司，注册资本1.5亿元人民币，获评为高新技术企业及软件企业。公司以"创造卓越、为证券市场提供一流信息服务"为宗旨，肩负着打造信息产业链和提供市场基础设施的重任。
 </div>
<el-button type="text" class="popper-btn" @click="isOpen=!isOpen">{{word}}<i :class="isOpen?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
//js
export default {
	data(){
		return {
			isOpen:false,//默认折叠
		}
	},
	computed: {
    // 内容
      word() {
        if (this.isOpen === false) {
          return '展开'
        } else if (this.isOpen === true) {
          return '收起'
        } else if (this.is_show === '') {
          return null
        }
      },
    }
}

// css
.new_detail{
         padding:5px 50px 5px 0;
         font-size: 14px;
       }
 .default{
          padding:5px 50px 5px 0;
          font-size: 14px;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          position: relative;
       }
.popper-btn{
    position: absolute;
    right: 15px;
    bottom: 21px;
  }