[JavaScript知识库]Vue 文字超出行数后，显示省略号，并且尾部拼接 展开与收起功能

Vue 文字超出行数后，显示省略号，并且尾部拼接 展开与收起功能

样式什么的，我就简单写写，大家自己拼凑，主要看函数方法

<template>
    <div>
        <div v-for="(item, index) in contentData" :key="index">
            <div class="text">
                <span class="theme">#{{item.theme}}</span>  
                <span class="content" :ref="'content'+index">{{transformText(item.text)}}</span>
                <span class="more" :ref="'more'+index" v-if="item.text.length > 60" @click="showMore(index, item)">展开</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                contentData:[
                    {theme:'广州新闻', text:'近日，广州出租车驾驶员罗文在番禺大道北碧桂园门口，接载了一女乘客去海印桥沿江路。女乘客下车时，突然将身上所有的现金都留在了车上。罗师傅意识到女子的异常，因为桥上无法停车，情急之下他在桥上绕了六七圈后发现女乘客已越过江边围栏准备轻生，急忙拨打了110报警，3分钟后公安赶到了现场，最终女子被救回'},
                    {theme:'天眼查罚款', text:'罚款5万，没收违法所得337.01元】天眼查App显示，近日，北京必胜客比萨饼有限公司和谐广场餐厅，因操作间的食品原料（“散叶罗马绿缤纷蔬菜”半袋、“京葱长段”半袋）已超过保质期，被北京市丰台区市场监督管理局罚款5万、没收违法所得337.01元'},
                    {theme:'梁洁把春天的颜色穿在身上', text:'梁洁最新春日写真，身穿浅蓝色吊带，在阳光充足的户外化身成为草地上独一无二的春日好景。她雪白的肌肤裸露在阳光的照射下，显得晶莹剔透，泛着象牙白的光晕。绝美的容貌，精致小巧。神情是柔软的神色。虽然是初春却已有了夏日的风情。一片翠绿之中，她犹如已经绽放的春日花朵，在万绿从中，成为了最艳丽的那一抹焦点。让人感觉如沐春风的温暖，又似拥有了夏日的清凉'},
                ]
            }
        },
        methods:{
            transformText(v){
                if(v.length > 60){
                    return v.slice(0, 40) + ' .....'
                }
            },
            showMore(index, data){
                if(this.$refs['more'+index][0].innerHTML == '展开'){
                    this.$refs['more'+index][0].innerHTML = '收起'
                    this.$refs['content'+index][0].innerHTML = data.text
                }else{
                    this.$refs['more'+index][0].innerHTML = '展开'
                    this.$refs['content'+index][0].innerHTML = data.text.slice(0, 40) + ' .....'
                }
                
            },
        }
    }
</script>

<style lang="scss">
 .text{
     width:400px;
    padding-right:20px;
    padding-left:80px;
    margin:10px 0;
    line-height: 30px;
    .theme{
        color:#00A0D8;
        cursor:pointer
    }
    .more{
        cursor:pointer;
        color:orange;
    }
}
</style>