应用场景

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

    hive的最新学习资料:http://www.cnblogs.com/qingyunzong/p/8707885.html hive的参数设置大全:https://cwiki.apache.org/c ...

  2. L2-4 部落 (25 分)

    在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不同的朋友圈.我们认为朋友的朋友都算在一个部落里,于是要请你统计一下,在一个给定社区中,到底有多少个互不相交的部落?并且检查任意两个人是否属于同 ...

  3. 写个.net开发者的Linux迁移指南

    前言 为什么要迁移到Linux 首先我个人还是有点软件洁癖,以前是穷酸学生的时候也是用盗版的用户,后来在知乎被洗脑终于有了点版权意识.然后便有了能用开源软件的就用开源,实在不能就选社区版或者免费版.于 ...

  4. ABP大型项目实战(2) - 调试与排错 - 日志 - 查看审计日志

    这是<ABP大型项目实战>系列文章的一篇.   项目发布到生产环境后难免会有错误. 那么如何进行调试和排错呢?   我看到俱乐部里有人是直接登陆生产服务器把数据库下载到开发机器进行调试排错 ...

  5. 【Swift 4.0】iOS 11 UICollectionView 长按拖拽删除崩溃的问题

    正文 功能 用 UICollectionView 实现两个 cell 之间的位置交互或者拖拽某个位置删除 问题 iOS 11 以上拖拽删除会崩溃,在 iOS 9.10 都没有问题 错误 017-10- ...

  6. 06 Django REST Framework 版本控制

    01-版本控制 对接口进行版本控制只是一种杀死已部署客户端的“礼貌”方式. - 罗伊菲尔丁. 1. API版本控制允许您更改不同客户端之间的行为.REST框架提供了许多不同的版本控制方案. 2. 版本 ...

  7. docker(六) 使用docker-maven-plugin插件构建docker镜像(已过时)

    可以参考博客:https://blog.csdn.net/aixiaoyang168/article/details/77453974 docker-maven-plugin官网推荐在新项目中使用do ...

  8. Flask 微信公众号开发

    公众号接口 1. 公众号消息会话 目前公众号内主要有这样几类消息服务的类型,分别用于不同的场景. 群发消息 公众号可以以一定频次(订阅号为每天1次,服务号为每月4次),向用户群发消息,包括文字消息.图 ...

  9. 桌面应用之electron开发与转换

    桌面应用之electron开发与转换 一,介绍与需求 1.1,介绍 1. Electron简介 Electron是用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Ele ...

  10. Express使用art-template模板引擎

    第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...