当前位置:   article > 正文

vue事件对象$event

事件对象$event

  参考来源:

黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili

功能:

点击按钮,增加减少count,并修改按钮背景颜色;

点击加号按钮,偶数为粉色,奇数为透明,点击减号按钮,偶数为红色,奇数为透明。

效果展示:

 

 

 

代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>title</title>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <p>count的值是:{{ count }}</p>
  12. <button @click="add(1,$event)">+ n</button>
  13. <button @click="sub(1,$event)">- n</button>
  14. </div>
  15. <!-- 导入vue的库文件 -->
  16. <script src="./lib/vue-2.6.12.js"></script>
  17. <!-- 创建vue的实例对象 -->
  18. <script>
  19. const vm = new Vue({
  20. // 表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
  21. el: '#app',
  22. // data对象就是要渲染到页面上的数据
  23. data: {
  24. count: 0,
  25. },
  26. // 定义事件的处理函数
  27. methods: {
  28. add (n,e) {
  29. this.count += n;
  30. // 判断this.count的值是否为偶数
  31. if(this.count % 2 === 0){
  32. e.target.style.backgroundColor = 'pink'
  33. }else {
  34. e.target.style.backgroundColor = ''
  35. }
  36. },
  37. sub (n,e) {
  38. this.count -= n;
  39. if(this.count % 2 === 0){
  40. e.target.style.backgroundColor = 'red'
  41. }else {
  42. e.target.style.backgroundColor = ''
  43. }
  44. }
  45. }
  46. })
  47. </script>
  48. </body>
  49. </html>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/79329
推荐阅读