标签：组件 func lte template strong display 描述 def one
应用场景
在评论列表中，有很多条评论（通过循环出来的评论列表），评论的文字有多跟少，默认展示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>
标签：组件 func lte template strong display 描述 def one
原文地址：https://www.cnblogs.com/qdlhj/p/10445117.html
