应用场景

在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示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. FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)

    FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...

  2. python 枚举Enum

    常量是任何一门语言中都会使用的一种变量类型 如 要表示星期常量,我们可能会直接定义一组变量 JAN = 1 TWO = 2 ... 然后在返回给前端的时候,我们返回的就会是1,2,...这种魔法数字, ...

  3. String Successor zoj 3490

    链接 [https://vjudge.net/contest/294259#problem/D] 题意 就是给你一个字符串,要进行n次操作 让你输出每次的字符串 操作规则: 1.如果有数字或者字母就忽 ...

  4. 软件工程(GZSD2015) 第二次作业小结

    第二次作业,从4月7号开始,陆续开始提交作业.根据同学们提交的作业报告,相比第一次作业,已经有了巨大改变,大家开始有了完整的实践,对那些抽象的名词也开始有了直观的感受,这很好.然后有一些普遍存在的问题 ...

  5. Gradle打jar包命令

  6. Shell命令-文件及目录操作之chattr、lsattr

    文件及目录操作 - chattr.lsattr 1. chattr:改变文件属性 chattr命令的功能说明 chattr命令用于改变文件属性.这项指令可改变存放在ext2文件系统上的文件或目录属性, ...

  7. nginx.conf配置详解

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  8. vue路由嵌套,vue動態路由

    https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...

  9. Python——Django-__init__.py的内容

    一.告诉Django用pymysql来代替默认的MySQLdb(在__init__.py里) import pymysql #告诉Django用pymysql来代替默认的MySQLdb pymysql ...

  10. Wannafly Union#1

    题目链接:http://vjudge.net/contest/142053#overview A.题意:有一个3*n的隧道,人和车轮流走,人先向右走一步,然后选在是在原地不动还是上下移动一格,之后车开 ...