当前位置：首页 > VUE

vue查看更多怎么实现

2026-02-09 14:41:06VUE

Vue 实现“查看更多”功能

方法一：使用 v-show 或 v-if 控制显示内容

通过设置一个布尔值变量，控制内容的展开与折叠。

<template>
  <div>
    <p v-show="!isExpanded">{{ truncatedText }}</p>
    <p v-show="isExpanded">{{ fullText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '查看更多' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的长文本内容...',
      truncatedText: '这里是截断的文本内容...',
      isExpanded: false
    }
  }
}
</script>

方法二：动态计算截断文本

结合计算属性，动态截取文本内容。

vue查看更多怎么实现

<template>
  <div>
    <p>{{ displayText }}</p>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '查看更多' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的长文本内容...',
      maxLength: 50,
      isExpanded: false
    }
  },
  computed: {
    displayText() {
      return this.isExpanded 
        ? this.fullText 
        : this.fullText.slice(0, this.maxLength) + '...'
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

方法三：使用 CSS 控制文本行数

通过 CSS 的 line-clamp 属性实现多行文本截断。

vue查看更多怎么实现

<template>
  <div>
    <p :class="{ 'truncate': !isExpanded }">{{ fullText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '查看更多' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的长文本内容...',
      isExpanded: false
    }
  }
}
</script>

<style>
.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

方法四：结合第三方库

使用如 vue-truncate-collapsed 等第三方库快速实现。

npm install vue-truncate-collapsed

<template>
  <div>
    <truncate :length="50" :text="fullText" />
  </div>
</template>

<script>
import Truncate from 'vue-truncate-collapsed'

export default {
  components: { Truncate },
  data() {
    return {
      fullText: '这里是完整的长文本内容...'
    }
  }
}
</script>

注意事项