vue-展开收起按钮的实现

在仿豆瓣中有一个展开的小按钮，点击可以展开全部的内容介绍，不展开的话则只显示三行。

这里我是直接用一个控制添加多行省略的类来实现这个效果的。

<p id="showAll" :class="{ellpes:!showAll}">{{data.showAll}}}</p>

<a @click="fun_showAll" href="javascript:void(0)">( {{showAll?"收起":"展开"}} )</a>

data.showAll是data中的每个属性，而showAll则是我定义的一个控制切换的变量。

每次点击a标签的时候就是切换了showAll这个数据的值。

fun_showAll(){

this.showAll=!this.showAll;

},

当这个数据改变的时候a标签的显示文本也会随之改变，而p的类也会改变，如果showAll就不添加ellpes类，如果不是showAll说明是收起状态就要添加ellpes类。

style中ellpes类的实现

.ellpes{

text-overflow:ellipsis;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:3; /*这个数字是设置要显示省略号的行数*/

-webkit-box-orient:vertical;

}