vue实现内容过多隐藏，点击显示

html
Description是介绍的具体内容

<div class="introduce">介绍：{{Description}}</div>
<div class="more" v-if="!isShowAll && isRoll" @click="toDown">展开<i class="iconfont icon-up2-copy"></i></div>
<div class="more" v-if="!isShowAll && !isRoll" @click="toUp">收起<i class="iconfont icon-up2"></i></div>

css

.introduce {
    width: 400px;
    font-size: 14px;
    font-weight: normal;
    word-wrap:break-word;
}
.more {
    position: absolute;
    bottom: -20px;
    right: 0px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    color: rgb(26, 76, 212);
}

data部分
isShowAll的值和介绍内容长度有关 用来控制显示和隐藏按钮的

    data() {
        return {
            // 歌单信息
            playListDetail: {},
            // 歌单介绍是否显示完整
            isShowAll: true,
            // 歌单介绍是否是收起状态
            isRoll: true,
            Description: null
        }
    },

watch部分
当内容大于200个字符的时候，对内容进行截取，并且显示按钮

    watch: { 
        'playListDetail.description': function() {
            if (this.playListDetail.description.length > 200) {
                this.Description = this.playListDetail.description.substr(0, 200);
                this.isShowAll = false;
            } else {
                this.isShowAll = true;
            }
        }
     },

methods

        // 点击按钮展开歌单介绍
        toDown() {
            this.Description = this.playListDetail.description;
            this.isRoll = false;
        },
        // 点击按钮收起歌单介绍
        toUp() {
            this.Description = this.playListDetail.description.slice(0, 200) + '...';
            this.isRoll = true;
        },

结果展示