用vue文本超过20字展示省略号,并加上展开和收起的功能

哪位大佬能提供一个小demo,不胜感激

有帮助能点采纳吗，谢谢~
效果查看图片：https://img-mid.csdnimg.cn/release/static/image/mid/ask/1625726415615csdnuploader.gif

<style>
    a{color:#f00}
 </style>
<div id="app">
    <div>{{word1.length>20&&State['word1']?word1.substring(0,20)+'...':word1}}<a v-bind:style="{display:word1.length>20?'inline':'none'}" v-on:click="toggle" rel="word1">{{State['word1']?'展开':'收起'}}</a></div>
    <div>{{word2.length>20&&State['word2']?word2.substring(0,20)+'...':word2}}<a v-bind:style="{display:word2.length>20?'inline':'none'}" v-on:click="toggle" rel="word2">{{State['word2']?'展开':'收起'}}</a></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            word1: 'v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。',
            word2: '看着非常像 CSS',
            State: { word1: true, word2: true }
        },
        methods: {
            toggle(e) {
                var a = e.target, rel = a.getAttribute('rel');
                this.State[rel] = !this.State[rel];

            }
        }
    })
</script>

<template>
  <div>
    {{showText}}
    <span v-if="status" style="color:red" @click="status = !status;showText = text">...展开</span>
    <span v-else style="color:red" @click="status = !status ; showText = text.slice(0,20)">收起</span>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        status: true,
        text: '用vue文本超过20字展示省略号,并加上展开和收起的功能用vue文本超过20字展示省略号,并加上展开和收起的功能用vue文本超过20字展示省略号,并加上展开和收起的功能',
        showText: ''
      }
    },
    created() {
      this.showText = this.text.length > 20 ? this.text.slice(0, 20) : this.text
    }
  }
</script>

大概这样？

<p>{{flag?text.slice(0,20):text}}<label @click="flag=!flag">{{flag?"...展开":"收起"}}</label></p>