• vue中怎么实现获取当前点击对象this


    应用场景

    在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示!

    问题描述

    要是在传统的点击事件中,我们可以获取当前点击事件的this来执行相应的操作,但是在vue中没有这个点击this事件!

    解决问题

    1、在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>

    2、借助事件对象event来获取相关值进行操作

    <button @click = “clickfun(2,$event)”>点击</button>

    methods

    $event 的用法--获取当前父元素,子元素,兄弟元素

    methods: {
    clickfun(other,e) {
    // e.target 是你当前点击的元素
    // e.currentTarget 是你绑定事件的元素
        #获得点击元素的前一个元素
        e.currentTarget.previousElementSibling.innerHTML
        #获得点击元素的第一个子元素
        e.currentTarget.firstElementChild
        # 获得点击元素的下一个元素
        e.currentTarget.nextElementSibling
        # 获得点击元素中id为string的元素
        e.currentTarget.getElementById("string")
        # 获得点击元素的string属性
        e.currentTarget.getAttributeNode('string')
        # 获得点击元素的父级元素
        e.currentTarget.parentElement
        # 获得点击元素的前一个元素的第一个子元素的HTML值
        e.currentTarget.previousElementSibling.firstElementChild.innerHTML
      
        }
            }
  • 相关阅读:
    网站无脑搭建,自己可以建个站玩一玩儿
    Python2和Python3中urllib库中urlencode的使用注意事项
    图像的缩放与图像金字塔
    模糊聚类算法(FCM)
    java调用python脚本
    雷林鹏分享:jsp HTTP 状态码
    雷林鹏分享:jsp 服务器响应
    雷林鹏分享:jsp 客户端请求
    雷林鹏分享:jsp 隐式对象
    雷林鹏分享:jsp 动作元素
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10445117.html
Copyright © 2020-2023  润新知