Vue 事件处理方法
发布时间：2023-04-18 15:03:37 所属栏目：教程 来源：
导读：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
监听点击事件，并在触发时运行一些 JavaScript 代码
<!DOCTYPE
使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
监听点击事件，并在触发时运行一些 JavaScript 代码
<!DOCTYPE
|
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 监听点击事件，并在触发时运行一些 JavaScript 代码 <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div>商品数量 {{count}}</div> <button v-on:click="count = count + 1"> 加一个 </button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { count: }, }) </script> </html> 代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 count + 1 的操作。 通过 methods 实现事件函数绑定 在上面的例子中，我们把事件处理函数直接写在模板中，然而许多事件处理的逻辑都很复杂，所以直接把JS代码写在 v-on 指令中有时并不可行，v-on 指令可以接收一个定义的方法来调用。示例如下： <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div>商品数量 {{count}}</div> <button v-on:click="add"> 加一个 </button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { count: }, methods: { add() { this.count = this.count + } } }) </script> </html> 代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。 给事件传递参数 有时候我们需要在事件触发的时候传递一些参数， <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div>商品数量 {{count}}</div> <button v-on:click="setCount(10)"> 设置为 10 个 </button> <button v-on:click="setCount(0)"> 设置为 0 个 </button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { count: }, methods: { setCount(count, event) { this.count = count } } }) </script> </html> 代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定了一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。 获取原生 DOM 事件 有时我们需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法： <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div>商品数量 {{count}}</div> <button v-on:click="setCount(10, $event)"> 设置为 10 个 </button> <button v-on:click="setCount(0, $event)"> 设置为 0 个 </button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { count: }, methods: { setCount(count, event) { this.count = count console.log(event) } } }) </script> </html> 代码解释： 在上述 JS 代码第 9-12 行，我们定义了事件函数 setCount。 在按钮点击事件中，我们将 $event 对象传递给函数，因此，在函数 setCount 中可以访问到原生事件对象。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
