javascript 文字折叠 vue 文字折叠

在以一篇文章中，可能文章特别长，但是在页面第一次显示的时候可能就只需要显示一部分，这种情况下就需要自己进行修改

基本思路

利用类名就是预先定义一个类名，设置高度，和overflow：hidden，前提：这是一个单独的盒子

例如

.con-art{
    height: 280px;
    overflow: hidden;
}

 在类名利用动态类名进行控制

例如

<span @click='seeAll' v-if='article.content.length>600'>{{seeall?'查看全文':'收起'}}</span>

<div :class="{'con-art':seeall}">
                 {{article.content}}
            </div>

 

在span元素上定义一个事件，点击的时候进行对seeall的布尔值进行取反

seeAll(){
            this.seeall=!this.seeall
        },

 单击的时候进行对seeall的布尔值进行操作，然后今儿对div的类名进行操作

希望自己写的东西能够对大家有所帮助！谢谢