vue中怎么实现获取当前点击对象this

Posted 2021-02-11 qdlhj

应用场景

在评论列表中，有很多条评论（通过循环出来的评论列表），评论的文字有多跟少，默认展示2行超出显示点击查看更多，，要点击查看更多对当前的这条评论进行全部评论展示！

问题描述

要是在传统的点击事件中，我们可以获取当前点击事件的this来执行相应的操作，但是在vue中没有这个点击this事件！

解决问题

在vue中我们要通过组件的方式来实现对当前元素进去切换

父组件

<v-content :cont="item.content"></v-content>

子组件content

<template>
    <div>
    <p class="q-des-c" :class="{‘text-overflow‘:flowshow}">{{cont}}</p>
    <p class="ckqw" @click="allText" :style="{‘display‘:showHide}">{{kan}}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                flowshow:true,
                kan:"查看全文",
                showHide:"block"
                
            }
        },
        methods: {
            allText:function(){
                if(this.flowshow){
                    this.flowshow=false;
                    this.kan="收起"
                }else{
                    this.flowshow=true;
                    this.kan="查看全文"
                }
            },
        },
        props: {
            cont:{
                type:String,
                default:‘‘
            },
        },
        created(){
//            console.log("字数"+this.cont.length);
            if(this.cont.length>36){
                this.showHide="block";
            }else{
                this.showHide="none";
            }
        }
    }
</script>