vue 点击上数据上一条_vuejs数据超出单行显示更多，点击展开剩余数据实例

说下我在工作中遇到的这个需求

1：页面上的菜单选项，选项内容是后台接口返回的数据，现在的需求是当选项的内容超出一行，在这行的右面显示更多，点击更多，显示剩下的选项的内容

看下效果图

这是展开的效果图

下面先看下我的html部分代码

业务类型:

@click="getchildMenu($event)" class="active">全部

@click="getchildMenu($event)">{ {item.name}}

v-show="bussinessHeight>40">

{ { bussinessType ? '收起' : '更多'}}

说下原理show就是展开的时候使用的样式名称，hide是显示一行是使用的样式(主要就是控制容器高度)

.show{

height: auto;

border-bottom: 1px solid #ebebeb;

}

.hidde{

height: 40px;

overflow: hidden;

border-bottom: 1p