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的类名进行操作

 

转载于:https://www.cnblogs.com/mrxinxin/p/10181277.html