vue绑定事件后获取绑定事件中的this

最新推荐文章于 2024-08-07 09:03:59 发布
最新推荐文章于 2024-08-07 09:03:59 发布
阅读量1w 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanbozhiguang/article/details/80461133
版权 
 

 

使用$event传递参数(事件本身)
 

<input v-model="checknames" @change="changecheckbox(item,$event)"  style="float: right" type="checkbox" :value="index" >
 

 

changecheckbox(val,element) {
 console.log( element.currentTarget);
 if( element.currentTarget.checked){
   .....
 }
}
 


                

        

        

    

  


    

      

        

            

              
                
                  lanbozhiguang
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
踩坑系列//vue中d3的click事件怎么获取对应数据？？vue中第三方插件的click事件，传回来第一个参数是vue的事件、第二个参数才是自定义参数

				
			

			

				

					weixin_37877794的博客
				

				

					09-25
					
					1697
					
				

			

		

		

			
				
vue中d3的click事件怎么获取对应数据？？
vue @click 绑定的函数，如何同时传入事件对象和自定义参数？？vue中第三方插件的click事件，传回来第一个参数是vue的事件、第二个参数才是插件本身的内容。.on(‘click’, function ($event, e) {})
https://blog.csdn.net/little_kid_pea/article/details/89736282

html 文件中 d3 的 click 事件返回的

.on('click', functi

			
		

	



                

              
                



	

		

			

				
					
源码分析：vue和react组件事件绑定中的this

				
			

			

				

					weixin_33726313的博客
				

				

					10-23
					
					260
					
				

			

		

		

			
				
vue组件定义methods使用箭头函数
直接从问题开始吧。
第一种情况代码：
&lt;template&gt;
  &lt;button  @click="sayHello"&gt;say hellow&lt;/button&gt;
&lt;/template&gt;
&lt;script&gt;
  export default {
    methods: {
      sayHello(...

			
		

	



                


  
              

                


	

		

			

				
					
Vue的事件处理、事件修饰符、键盘事件

					
最新发布

				
			

			

				

					Bulut0907
				

				

					08-07
					
					1016
					
				

			

		

		

			
				
但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃。Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock。@keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到。系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)注意: 多个事件修饰符可以连写，如。

			
		

	





	

		

			

				
					
vue中事件的绑定机制

				
			

			

				

					qq_39239110的博客
				

				

					02-20
					
					1024
					
				

			

		

		

			
				
vue中事件的绑定机制分为两种：单向数据绑定和双向数据绑定
1.单向数据绑定用v-bind,可以缩写为“：”
2.双向数据绑定用v-model
例如：
&lt;div id="app"&gt;
            &lt;h2&gt;{{msg}}&lt;/h2&gt;
      &lt;!--单向数据绑定--&gt;
             &lt;input type="text"  

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					weixin_30872867的博客
				

				

					02-27
					
					2522
					
				

			

		

		

			
				
应用场景
在评论列表中，有很多条评论（通过循环出来的评论列表），评论的文字有多跟少，默认展示2行超出显示点击查看更多，，要点击查看更多对当前的这条评论进行全部评论展示！
问题描述
要是在传统的点击事件中，我们可以获取当前点击事件的this来执行相应的操作，但是在vue中没有这个点击this事件！
解决问题
在vue中我们要通过组件的方式来实现对当前元素进去切换
父组件

<v...

			
		

	





	

		

			

				
					
jquery得到点击事件的this对象

				
			

			

				

					taotoxht的专栏
				

				

					11-07
					
					9215
					
				

			

		

		

			
				
$(function()
 {

    // 点击任意
 li,全部 li 变色

    $("#tree
 li").click(function(e)
 {

        $(this).css("color", "red");

    });

});








$(function()
 {

    //
 点击第二层

			
		

	





	

		

			

				
					
vue绑定事件后获取绑定事件中的this方法

				
			

			

				

					10-18
				

			

		

		

			
				
本文将深入探讨如何在Vue事件绑定中获取`this`，以及如何使用`$event`传递参数。  首先，`this`在JavaScript中是一个非常关键的概念，它指的是当前上下文的对象。在Vue组件的方法中，`this`通常指向调用该方法的 Vue...

			
		

	





	

		

			

				
					
vue的事件绑定与方法详解

				
			

			

				

					08-29
				

			

		

		

			
				
事件绑定是指将一个事件与一个方法绑定在一起，例如点击事件、双击事件、鼠标悬停事件等等，而方法是指在 Vue 实例中定义的一些函数，以便在特定的事件发生时执行这些函数。  一、事件绑定  在 Vue 中，事件绑定是...

			
		

	





	

		

			

				
					
vue 实现特定条件下绑定事件

				
			

			

				

					10-16
				

			

		

		

			
				
在Vue.js框架中，有时我们需要根据特定条件来决定是否绑定事件监听器，以实现更灵活的交互逻辑。在给定的例子中，我们将探讨如何在Vue组件中实现这一功能，主要涉及`v-bind`指令、条件渲染以及自定义方法的调用。  ...

			
		

	





	

		

			

				
					
vue 方法调用 this指向

				
			

			

				

					阿布
				

				

					02-22
					
					4030
					
				

			

		

		

			
				
原文地址：https://blog.csdn.net/WatermelonMk/article/details/83060468

转载内容：1.错误代码



2.正确代码



 

调用的时候 把此vue对象的指向作为参数 传递给被调用的函数...

			
		

	





	

		

			

				
					
5. Vue 事件绑定

				
			

			

				

					heaven_dad的博客
				

				

					07-29
					
					148
					
				

			

		

		

			
				
5. Vue 事件绑定

​	代码演示1


@click单击事件

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <div id="app">
        <!-- 通过按钮实现事件的绑定 -->
        <button v-on:click="search()">查询结果<

			
		

	





	

		

			

				
					
一文快速详解前端框架 Vue 最强大的功能

				
			

			

				

					CSDN资讯
				

				

					05-21
					
					5144
					
				

			

		

		

			
				
作者 | 浪里行舟

责编 | 胡巍巍

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：



如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主...

			
		

	





	

		

			

				
					
JS中的this指向

					
热门推荐

				
			

			

				

					m0_55990909的博客
				

				

					05-13
					
					3万+
					
				

			

		

		

			
				
this的概念：


在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。


在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。



普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。
箭头函数：箭头函数的this指向于函数作用域所用的对象。

一、全局环境下的this指向

在全局作用域下，this始终指向全局对象window，无论是否是严格

			
		

	





	

		

			

				
					
vue---获取事件对象 ($event)

				
			

			

				

					weixin_46900256的博客
				

				

					06-12
					
					4927
					
				

			

		

		

			
				
我是子组件2点击我触发自定义事件xxx

			
		

	





	

		

			

				
					
Vue 获取事件的 event 对象(2种方式)

				
			

			

				

					前端技术
				

				

					02-23
					
					1万+
					
				

			

		

		

			
				
方式一：默认获取

不填写时，默认第一个参数就是 event 对象。


<template>
    <div>
        <button @click="onClick">点击</button>
    </div>
</template>

<script>
export default {
    methods: {
        onClick(e) {
            console.log(e

			
		

	





	

		

			

				
					
Vue鼠标点击事件和键盘事件

				
			

			

				

					weixin_57663206的博客
				

				

					02-19
					
					6304
					
				

			

		

		

			
				
Vue鼠标点击事件和键盘事件

			
		

	





	

		

			

				
					
vue点击事件

				
			

			

				

					RzhenDwo的博客
				

				

					08-02
					
					1万+
					
				

			

		

		

			
				
vue-button点击事件

			
		

	





	

		

			

				
					
Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 & currentTarget-绑定事件元素 & 获取兄弟元素、子元素、父元素

				
			

			

				

					weixin_44867717的博客
				

				

					07-07
					
					9632
					
				

			

		

		

			
				
vue

			
		

	





	

		

			

				
					
vue点击事件中的this指向问题

				
			

			

				

					gaokunpeng111的博客
				

				

					03-29
					
					948
					
				

			

		

		

			
				
singlecheck[i].addEventListener("click", ()=>{
            console.log(this.indexs)
            if(singlecheck[i].checked){                     
              this.indexs.push(this.tableData[i].id)
            }
一定要用箭头函数  如果用function(){}中的this指向触发事件的 元素

			
		

	





	

		

			

				
					
vue2中获取DOM绑定原生js键盘事件

				
			

			

				

					07-14
				

			

		

		

			
				
在Vue2中，你可以通过使用`ref`来获取DOM元素的引用，并使用原生的JavaScript来绑定键盘事件。以下是一个示例：  ```html           export default {  mounted() {  this.$refs.inputRef.addEventListener('keyup',...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值