vue中文章的折叠于显示全部

2024-02-14 13:56:04

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

基本思路

利用类名就是预先定义一个类名，设置高度，和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的类名进行操作

码农公寓