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 ...
随机推荐
- [Oracle维护工程师手记]Data Guard Broker中改属性是否需要两侧分别执行?
Data Guard Broker中改属性是否需要两侧分别执行? Data Guard Broker有一些属性,可以通过 show configuration 看到.我有时会想,这些个属性,是否是分别 ...
- 小程序——阿里服务器配置https及什么是IIS
1.申请域名:阿里云 2.免费开启SSL证书:管理=>免费开启SSL证书>单域名>dev.xxx.top 3.配置服务器:下载=>IIS7证书 *注册一个域名,可以免费开启一个 ...
- es6箭头函数 this 指向问题
es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...
- CodeForces Round #545 Div.2
A. Sushi for Two 代码: #include <bits/stdc++.h> using namespace std; ; ; int a[maxn], vis[maxn]; ...
- AVL树探秘
本文首发于我的公众号 Linux云计算网络(id: cloud_dev) ,专注于干货分享,号内有 10T 书籍和视频资源,后台回复 「1024」 即可领取,欢迎大家关注,二维码文末可以扫. 一.AV ...
- Meterpreter提权详解
0x01 Meterpreter自动提权 1.生成后门程序 我们在kali的命令行下直接执行以下命令获得一个针对windows的反弹型木马: msfvenom -p windows/meterpr ...
- 最大公约数和最小公倍数(Greatest Common Divisor and Least Common Multiple)
定义: 最大公约数(英语:greatest common divisor,gcd).是数学词汇,指能够整除多个整数的最大正整数.而多个整数不能都为零.例如8和12的最大公因数为4. 最小公倍数是数论中 ...
- Mac spotlight无法搜索的解决方法
出现问题: 1. 在打开spotlight快速搜索的时候输入两个字符,后该搜索框自动会消失,很是奇怪重启等操作也没有效果 问题原因: 可能因为之前因为耗电原因关闭的全局搜索的索引,或者由于索引出现错误 ...
- LOJ#2723 多边形
解:首先,n<=20的直接暴力建图然后状压哈密顿回路,相信大家都会.固定1为起点,fi,s表示结尾为i点,状态为s.每次遍历i的出边转移,最后遍历1的出边统计答案.n22n. 然后就是正经题解了 ...
- ADO.NET中的五大内置对象
ADO.NET中的五大内置对象 学习链接:https://blog.csdn.net/wxr15732623310/article/details/51828677