vuejs数据超出单行显示更多，点击展开剩余数据实例

projectType: function () {
this.$nextTick(function(){
let cur = this.$refs['bussinessTypeRef'];
if(cur){
this.bussinessHeight = cur.clientHeight;
}
});
},

这时候更多文字按钮显示，我们就控制dl外层的div容器，让该容器使用hide的样式，点击更多的时候，让控制显示更多的变量变为相反的值，这样让收起显示出来，更多消失，同时让外层的div容器使用show的样式。这样一来就实现了文字超出一行显示更多，点击收起的交互效果。

下面附上完整的代码供参考

<div :class="bussinessType?'show':'hidde'">
<dl>
<dt>业务类型:</dt>
<dd ref="bussinessTypeRef">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name=""
@click="getchildMenu($event)" class="active">全部</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :name="item.code" v-for="item in projectType"
@click="getchildMenu($event)">{{item.name}}</a>
</dd>
<i class="unfold" @click="bussinessType = !bussinessType"
v-show="bussinessHeight>40">
            {{ bussinessType ? '收起' : '更多'}}
            <Icon :type="bussinessType?'chevron-down':'chevron-up'" ></Icon>
          </i>
</dl>
</div>
  // 行业
    businessType: function () {
      this.$nextTick(function(){
        let cur = this.$refs['industryRef'];
        if(cur){
        this.industryHeight = cur.clientHeight;
        }
      });
    },
.show{
height: auto;
border-bottom: 1px solid #ebebeb;
}
.hidde{
height: 40px;
overflow: hidden;
border-bottom: 1px solid #ebebeb;
}
.list-filter {
position: relative;
margin-bottom: 20px;
font-size: 14px;
}
.list-filter dl {
overflow: hidden;
}
.list-filter dt {
float: left;
font-weight: 400;
height: 40px;
line-height: 40px;
}
.list-filter dd {
margin-left: 30px;
float: left;
width: 85%;
line-height: 40px;
}
.unfold{
font-size: 14px;
  color: #00A971;
  cursor: pointer;
  font-style: normal;
  vertical-align: middle;
  display: inline-block;
  height: 40px;
  line-height: 40px;
}
.list-filter a {
color: #333;
display: inline-block;
margin-right: 20px;
padding: 0 5px;
text-decoration: none;
line-height: 2em;
z-index: 0;
}

以上所述是小编给大家介绍的vuejs数据超出单行显示更多，点击展开剩余数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！