La directiva v-on:click.ctrl es una directiva de Vue.js que se usa para agregar un detector de eventos de clic a un elemento. Mientras que la directiva de clic activa el evento para todo tipo de clics, esta directiva solo activa el evento cuando se presiona la tecla ctrl junto con el clic. Primero, crearemos un elemento div con id como una aplicación y aplicaremos la directiva v-on:click.ctrl a un elemento. Además, podemos ejecutar una función incluso cuando se produce un clic.
Sintaxis:
v-on:click.ctrl="function"
Parámetros: esta directiva acepta una función que se ejecutará cuando se produzca el evento Ctrl + clic.
Ejemplo: este ejemplo usa VueJS para alternar la visibilidad de un elemento con v-on:click.ctrl.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
VueJS v-on:click.ctrl directive
</title>
<!-- Load Vuejs -->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
VueJS | v-on:click.ctrl directive
</b>
</div>
<div id="canvas" style=
"border:1px solid #000000;
width: 600px;height: 200px;">
<div id="app" style=
"text-align: center;
padding-top: 40px;">
<button v-on:click.ctrl=
"data = !data">Show
</button>
<h1 v-if="data">
Ctrl + Click is pressed
</h1>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
data: false
}
})
</script>
</body>
</html>
Salida: al presionar el botón Mostrar junto con la tecla Ctrl, se puede ver la siguiente salida.
