vue中怎么实现获取当前点击对象this
应用场景
在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示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的更多相关文章
- vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑😊)
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...
- jquery中获取当前点击对象
jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);
- easyui获取当前点击对象tabs的title
现在如果要关闭一个tab,只能点击该tab上面的x号.现增加双击tab使其关闭. 可使用jquery的bind函数绑定dblclick双击事件 tabs的关闭方法为close 要传一个title参数表 ...
- easyui获取当前点击对象tabs的title和Index
观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...
- JQuery通过click事件获取当前点击对象的id,name,value属性等
$(".test").click(function () { var val=$(this).attr("id"); })
- JS-jquery 获取当前点击的对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jq获取当前点击的li是ul中的第几个?
<script> var navulsize = $('.navul li').size(); var navulwidth = $('.navul li').wid ...
- vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...
- C# Chart 点击获取当前点击坐标和Series
C# Chart 点击获取当前点击坐标和Series https://blog.csdn.net/wumuzhizi/article/details/47168989 2015年07月31日 13:5 ...
随机推荐
- 在pycharm中查看内建函数源码
鼠标放在内建函数上,Ctrl+B,看源码
- PS制作漂亮紫色霓虹灯光文字
一.新建画布,大小1500 * 950像素,分辨率为300,置入墙壁图像,大小适合. 二.调整图层的色阶,色相/饱和度. 三.新建文字图层,颜色为#a33e88,大小为103,字体为Beon Medi ...
- springboot打成jar后文件读取问题
springboot打成的jar包里面不能用File去获取文件对象,只能用流的方式去读取. 获取方式: InputStream resourceAsStream = 类名.class.getClas ...
- 使用.net core efcore根据数据库结构自动生成实体类
源码 github,已更新最新代码 https://github.com/leoparddne/GenEntities/ 使用的DB是mysql,所有先nuget一下mysql.data 创建t4模板 ...
- Jmeter Thread Group中如果存在HTTP request执行失败,就对整个Thread Group重新执行,限定最大执行次数N次
由于在对WEB系统进行自动化测试的过程中,经常会由于握手连接断开等原因导致HTTP请求发送失败,如果重新执行一次,会是成功的.在每天的自动化冒烟测试过程中,生成在测试报告存在误报,严重浪费了测试人员确 ...
- spring异常Unsatisfied dependency expressed through constructor parameter 0
异常信息: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with nam ...
- 通过工厂方法配置Bean
前面几节,我们配过了好多Bean,通过反射机制,在class属性里填写全类名,现在我们来讲讲其他方式,通过工厂方法,还有通过FactoryBean,这个在我们整合第三方框架时会用到. 工厂方法可以分为 ...
- Python——爬虫——数据提取
一.XML数据提取 (1)定义:XML指可扩展标记语言.标记语言,标签需要我们自行定义 (2)设计宗旨:是传输数据,而非显示数据,具有自我描述性 (3)节点关系: 父:每个元素及属性都有一个父. ...
- 数据分析---《Python for Data Analysis》学习笔记【02】
<Python for Data Analysis>一书由Wes Mckinney所著,中文译名是<利用Python进行数据分析>.这里记录一下学习过程,其中有些方法和书中不同 ...
- java java.net.URLConnection 实现http get,post
抽象类 URLConnection 是所有类的超类,它代表应用程序和 URL 之间的通信链接.此类的实例可用于读取和写入此 URL 引用的资源.通常,创建一个到 URL 的连接需要几个步骤: open ...