Vue事件处理

点击按钮的时候，次数加一

第一种：在click里面直接写js的代码

需求：使用@click=“counter+=1”,代码如下：

<button type="button" @click="counter+=1">按钮1</button>
<p>按钮1被点击的次数:{{counter}}</p>

第二种：在vue的methods中进行定义

<body>
    <div id="app">
        <!-- 
            1、可以在@click里面直接写js代码 
        -->
        <button type="button" @click="fn()">按钮1</button>
        <p>按钮1被点击的次数:{{counter}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el : "#app",
            data : {
                counter: 0,
            },
            methods: {
                fn() {
                    this.counter++;
                }
            }
        })
    </script>
</body>

事件对象event的定义

第一种：没有传参数的情况下，event是默认存在的，如下：

定义点击事件
<button type="button" @click="fn()">按钮1</button>

不需要定义event其仍然是可以调用
  fn() {//e代表是event对象，就算没有显示对象，也可以使用
　　this.counter++;
　　console.log(event);
  },

第二种：如果有传入参数，并且需要事件对象，那么就要显示的传入$event参数

有参数时并且需要用事件对象，需要传入$event参数
<button @click="test('hello', $event)">@click调用事件函数，传递参数并获取event对象</button>
test(a,e) {
　　console.log(a,e);
  }

posted @ 2024-08-14 15:28  洛飞  阅读(12)  评论(0)  编辑  收藏  举报