Vue中监听事件的使用

最新推荐文章于 2024-07-24 11:30:28 发布

.你别皱眉

最新推荐文章于 2024-07-24 11:30:28 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/qq_45938852/article/details/111524318

版权

本文介绍了在Vue中如何定义监听事件，通过`v-on`或`@`语法糖实现。内容包括基本的事件监听使用，以及在浏览器中观察到的事件参数。同时，文章探讨了在需要控制事件冒泡和捕获时，如何利用Vue的修饰符来实现特定功能。

摘要由CSDN通过智能技术生成

1、定义监听事件

使用v-on 或者语法糖 @事件来定义监听事件
如：v-on:click=“事件” or @click“事件“

下面展示监听事件的基本使用


<body>
    <div id="app">
        <h2>当前数值：{
   {
   center}}</h2>
    <button v-on:click="add">+</button>
    <!-- //语法糖 -->
    <button @click="sub">-</button>
</div>
    <script>
        const app = new Vue({
   
            el:'#app',
            data:{
   
                center:0,
            },
            methods:{
   
                add(){
   
                    this.center++;
                },
                sub(){
   
                    this