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>36){
                this.showHide="block";
            }else{
                this.showHide="none";
            }
        }
    }
</script>

原文地址:https://www.cnblogs.com/qdlhj/p/10445117.html

时间: 2024-10-13 15:02:26

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

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

现在如果要关闭一个tab,只能点击该tab上面的x号.现增加双击tab使其关闭. 可使用jquery的bind函数绑定dblclick双击事件 tabs的关闭方法为close 要传一个title参数表示哪个选项卡将被关闭. 所以首先就要获取被点击对象的title. 查找AIP getSelected方法是获得选中的选项卡面板,这个不行, 没能找到能直接获取title的方法. 观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,通过

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

观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.tabs-selected').text(); console.log(title);  --为0个采购合同 jquery里有一个方法是index([subject]) $("#ul li").index($("#selected")); 设定列表范围(#ul li列表)

vue项目实现渲染列表获取当前点击项(高亮)

一个简单的例子: 这是渲染列表的代码 在data里设置一个初始值0, <div v-for="(item, index) in tochildren" :key="index" @click="currentIndex=index" :class="{style1:index==currentIndex}">{{item}}</div> 也是实现需求的核心  主要是绑定属性样式是否为true,通过cli

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

<script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').width();            var allwidth = navulwidth*navulsize;            $('.navul').width(allwidth);            $('.navul li').click(function(){                va

【笔记】js获取当前点击元素的索引

以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何获取index的如下: js代码 var ul = document.getElementById("list"); var ul_child = ul.getElementsByTagName('li'); for (var i = 0; i < ul_child.length;

通过this获取当前点击选项相关数据

很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".selection", function (e) { e.stopPropagation(); //获取父级元素,使得隐藏的ul在添加on方法后显示出来 var that = $(this).parent(); console.log(that); that.addClass('on'); that.fi

jquery:获得当前点击对象 : $(this)

$(".state").click(function() { var val=$(this).attr("id"); alert(val); }); $("#tbody td").click(function() { //这时能够获得正确的被点击对象 var tdID = $(this).attr('id'); $.post(appPath + "/app/teach/train/save/", { publishID : $

vue给methods中的方法传入当前点击行的值

<template> <!-- 在template中,只能存在一个根组件 --> <div class="event"> <ul> <li v-on:click="getName(name,index,$event)" v-for='(name,index) in names'>{{name}}</li> </ul> <input type="text" v

vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se