Oleg Alexandrov

Обработка событий

← Назад

---

v-on

Обработка ввода пользователя

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {counter: 0}
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <button v-on:click="counter++">+</button>
        <span></span>
        <button v-on:click="if(counter>0) counter--">-</button>
        <!-- или -->
        <button @click="counter++">+</button>
        <span></span>
        <button @click="if(counter>0) counter--">-</button>
    </div>
</template>

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {counter: 0}
        },
        methods: {
            increase() {
                this.counter++
            },
            decrease() {
                if (this.counter > 0) this.counter--
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <button @click="increase">+</button>
        <span></span>
        <button @click="decrease">-</button>
    </div>
</template>

Передача параметров в обработчик событий

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {counter: 0}
        },
        methods: {
            increase(n) {
                this.counter = this.counter + n
            },
            decrease(n) {
                if (this.counter > 0) this.counter = this.counter - n
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <button v-on:click="increase(4)">+</button>
        <span></span>
        <button v-on:click="decrease(2)">-</button>
    </div>
</template>

Получение объекта события

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {counter: 0}
        },
        methods: {
            increase(event) {
                console.log(event)
                this.counter++
            },
            decrease(event) {
                console.log(event)
                if (this.counter > 0) this.counter--
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <button v-on:click="increase($event)">+</button>
        <span></span>
        <button v-on:click="decrease($event)">-</button>
    </div>
</template>

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {counter: 0}
        },
        methods: {
            increase(n, event) {
                console.log(event)
                this.counter = this.counter + n
            },
            decrease(n, event) {
                console.log(event)
                if (this.counter > 0) this.counter = this.counter - n
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <button v-on:click="increase(4, $event)">+</button>
        <span></span>
        <button v-on:click="decrease(2, $event)">-</button>
    </div>
</template>

Множественная обработка событий

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {
                counter: 0,
                status: ''
            }
        },
        methods: {
            increase(n) {
                this.counter = this.counter + n
            },
            inform() {
                this.status = 'Время нажатия кнопки: ' + new Date().toLocaleString()
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <button v-on:click="increase(2), inform">+</button>
        <span></span>
        <div></div>
    </div>
</template>

---

← Назад

This site is open source. Improve this page.