Vue.js v-on:click.ctrl 指令

v-on:click.ctrl指令是一个Vue.js指令，用于向元素添加点击事件监听器。虽然 click 指令会触发所有类型的点击事件，但该指令仅在ctrl 键与点击一起按下时触发事件。首先，我们将创建一个 id 为app的 div 元素，然后将v-on:click.ctrl指令应用于一个元素。此外，我们甚至可以在点击发生时执行一个函数。

句法：

v-on:click.ctrl="function"

参数：该指令接受一个函数，该函数将在 Ctrl + 单击事件发生时执行。

示例：此示例使用 VueJS 通过 v-on:click.ctrl 切换元素的可见性。

HTML

  

    
        VueJS v-on:click.ctrl directive
    
  
    
    
    
  

  

    
  
        
            GeeksforGeeks
        
          
        
            VueJS | v-on:click.ctrl directive
        
    
  
    
  
        
            Show
            
  
            
                Ctrl + Click is pressed
            
        
    
  
    
        var app = new Vue({
            el: '#app',
            data: {
                data: false
            }
        })
    

  

输出：在按下显示按钮和 ctrl 键时，可以看到以下输出。