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

Question

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

Answer 1

有帮助能点采纳吗，谢谢~
效果查看图片：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>