Vue中如何绑定事件 传递参数 |
您所在的位置：网站首页 › js中如何绑定事件 › Vue中如何绑定事件 传递参数 |
Vue中如何绑定事件 传递参数
|
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 基础用法： 添加您已购买 {{num}} 件 注：使用 v-on:xxx 绑定事件，其中 xxx 是事件名。事件函数 add 如果不需要传递参数，() 小括号可以省略不写。 const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add: function(){ this.num++; }, }, });注：事件函数需要写在 methods 对象中，事件函数最终会在 vm 上。如果需要使用 data 中的数据，可以用 this.xxx 操作数据，其中 xxx 是数据名。
v-on 指令简写【常用方式】 添加您已购买 {{num}} 件 注：v-on: 可以简写为 @ 符。变为 @xxx 绑定事件，其中 xxx 是事件名。 const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add(){ this.num++; }, }, });注：事件的回调可以简写为 add(){ } 的形式，与之效果相同。 事件函数中的 this 事件函数中的 this 默认指向 vm ，也就是 Vue 实例对象 或者 组件实例对象。 添加您已购买 {{num}} 件 const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add(){ console.log(this); // Vue this.num++; }, }, });注：data 中的数据相当于都在 Vue 实例上，而 this 又指向 Vue 实例，所以我们才能通过 this.num 操作 data 中的 num 数据。
另外注意 methods 中配置的函数，不要用箭头函数！否则 this 就不是 Vue 实例了。 添加您已购买 {{num}} 件 const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add:() => { console.log(this); // window this.num++; }, }, });注：现在的 this 指向 window ，而 window 中没有 num 这个数据，所以 this.num++ 不会发生任何变化。一定不要使用箭头函数！不要使用箭头函数！不要使用箭头函数！
事件对象 Event 添加您已购买 {{num}} 件 const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add(e){ console.log(e.target); // 添加 this.num++; }, }, });注：在不传递参数时，可以直接接收 event 事件对象。
原创作者：吴小糖 创作时间：2023.2.23 |
【本文地址】