Vue中文字只显示三行，超过部分收起的实现方法

我们在网站开发过程中经常会遇到需要显示很长的文本内容，但是如果这部分内容并不是用户所关心的，就会占据大量的页面空间，影响用户体验，也影响美观。我们通常的做法是将这段长文本收起，只显示三行或四行，如果用户想要查看完整内容，只需要点击展开即可显示全文，点击收起又可以隐藏多余的内容。

这里介绍以下三种形式的实现方式：

1.页面打开就显示文本内容
2.页面打开就显示，通过v-for遍历列表内容
3.页面打开不显示，点击按钮从服务器端获取数据并通过v-for遍历列表

下面开始逐一介绍

1.页面打开就显示文本内容

效果图如下：

代码实现：
vue中的html代码

<template>
    <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'" style="width: 60%;margin-left: 20%;margin-top: 20px;">
      <div class="intro-content" :title="introduce" ref="desc">
        <span class="merchant-desc" v-if="introduce">
          {{introduce}}
        span>
        <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
          <p>{{exchangeButton ? '展开' : '收起'}}p>
        div>
      div>
    div>
template>

这里值得一提的是

中的ref,注意它前面没有冒号，也就是说在页面检查源代码时是不会显示的，ref属性是用来访问dom元素值的，可以将class="intro-content"的dom集合也就是desc挂载到this.ref上，通过this.$refs.desc就可以获取到。

ref类似于原生js用document.getElementById('#id'),但是只是类似，他们的不同点是Vue是操控虚拟DOM ，也就是说在渲染初期并没有这个ref的属性，这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。
css代码：

注意，这里的