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

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

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

看下效果图

这是展开的效果图

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

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

.show{

height: auto;

border-bottom: 1px solid #ebebeb;

}

.hidde{

height: 40px;

overflow: hidden;

border-bottom: 1px solid #ebebeb;

}

这是我展示的菜单的部分，主要的思路是看这部分的高度是不是超出一行的高度，如果是超出一行的高度，则让dl外的div默认使用hide的样式

那么问题来了，怎么知道展示菜单的dd部分的高度超出一行了呢？

这就需要使用vuejs的watch来实现了

首先，watch监听ref是bussinessTypeRef的组件的高度(内容多的话自然dd容易会被撑高)，这时候与一行的高度(我这里设置的是40)作比较，如果超出，就让更多的文字按钮显示出来。下面是监听dd内容高度的watch方法

projectType: function () {

this.$nextTick(function(){

let cur = this.$refs['bussinessTypeRef'];

if(cur){

this.bussinessHeight = cur.clientHeight;

}

});

},

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

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

// 行业

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数据超出单行显示更多，点击展开剩余数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！