Vue.js v-on: директива click.shift

Опубликовано: 9 Декабря, 2021

Директива v-on: click.shift - это директива Vue.js, используемая для добавления прослушивателя событий щелчка к элементу. В то время как директива click запускает событие для всех видов щелчков, эта директива запускает событие только при нажатии клавиши Shift вместе с щелчком. Сначала мы создадим элемент div с идентификатором в качестве приложения и применим к элементу директиву v-on: click.shift. Кроме того, мы можем выполнять функцию даже при щелчке.

Синтаксис:

 v-on: click.shift = "функция"

Параметры: эта директива принимает функцию, которая будет выполняться при возникновении события Shift + click.

Пример: в этом примере Vue.js используется для переключения видимости элемента с помощью v-on: click.shift.

 <!DOCTYPE html>
 < html >
 
< head >
 
    <!-- 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.shift 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.shift =
                "data = !data" >Show
            </ button >
             
            < h1 v-if = "data" >
                Shift + Click is pressed
            </ h1 >
        </ div >
    </ div >
 
    < script >
        var app = new Vue({
            el: '#app',
            data: {
                data: false
            }
        })
    </ script >
 </ body >
 
</ html > 

Выход:

JavaScript

Vue.js v-on: директива click.shift

РЕКОМЕНДУЕМЫЕ СТАТЬИ