应用场景
在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示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>