应用场景

在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示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>){
this.showHide="block";
}else{
this.showHide="none";
}
}
}
</script>

vue中怎么实现获取当前点击对象this的更多相关文章

  1. vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑😊)

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...

  2. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

  3. easyui获取当前点击对象tabs的title

    现在如果要关闭一个tab,只能点击该tab上面的x号.现增加双击tab使其关闭. 可使用jquery的bind函数绑定dblclick双击事件 tabs的关闭方法为close 要传一个title参数表 ...

  4. easyui获取当前点击对象tabs的title和Index

    观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...

  5. JQuery通过click事件获取当前点击对象的id,name,value属性等

    $(".test").click(function () { var val=$(this).attr("id"); })

  6. JS-jquery 获取当前点击的对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. jq获取当前点击的li是ul中的第几个?

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  8. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  9. C# Chart 点击获取当前点击坐标和Series

    C# Chart 点击获取当前点击坐标和Series https://blog.csdn.net/wumuzhizi/article/details/47168989 2015年07月31日 13:5 ...

随机推荐

  1. Kafka 详解(一)------简介

    在前面几篇博客我们介绍过一种消息中间件——RabbitMQ,本篇博客我们介绍另外一个消息中间件——Kafka,Kafka是由LinkedIn开发的,使用Scala编写,是一种分布式,基于发布/订阅的消 ...

  2. rxjs一句话描述一个操作符(1)

    之前一直在写LINQ之类的东西,对于函数式的面向对象还是有一些功底,所以对于rxjs,感觉上不是很难,但是每次看完过几天就忘,还是记一下笔记吧,好记性不如烂笔头真不是盖的. 首先介绍几个重要的概念. ...

  3. DAO 四个包的建立

    一.DAO 四个包的建立,降低代码之间的耦合性? 之前写代码,都是在一个包下.代码耦合性较高,不利于后期的维护. dao(代码分层?) 有利于后期的维护代码,修改方便. com.aaa.dao 存放d ...

  4. CODEVS 3546 矩阵链乘法

    http://codevs.cn/problem/3546/ 题目 给定有n个要相乘的矩阵构成的序列(链)<A1,A2,A3,.......,An>,要计算乘积A1A2.....An.一组 ...

  5. Centos6 iptables 防火墙设置【转】

    1.指令 vi /etc/sysconfig/iptables 添加以下内容和要开放的端口 # Firewall configuration written by system-config-fire ...

  6. bzoj 2816: [ZJOI2012]网络 (LCT 建多棵树)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2816 题面: http://www.lydsy.com/JudgeOnline/upload ...

  7. CF914G Sum the Fibonacci

    解:发现我们对a和b做一个集合卷积,对d和e做一个^FWT,然后把这三个全部对位乘上斐波那契数,然后做&FWT就行了. #include <bits/stdc++.h> , MO ...

  8. Codeforces 1037E Trips

    原题 题目大意: 有\(n\)个人,起初他们都不是朋友.总共有\(m\)天,每天会有两个人成为朋友.他们计划在晚上出去旅游,对于一个人,有如下两种情况: 1.要么他不出去旅游 2.要么有至少\(k\) ...

  9. Springboot 4.Springboot 集成SwaggerUi

    SwaggerUi就是自动生成接口文档的这么一个类似于插件的工具,可以直接访问接口. 首先打开pom文件,将插件引进来,然后增加一个属性<properties>,用来设置版本号的,然后直接 ...

  10. 剑指Offer_编程题_23

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. class Solution { public: ...