vue2事件对象的使用

vue2事件对象的使用

本文基于H5、Vue.js v2.5.17开发。

  1. 点击按钮使计数值加一。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象title>
head>
<body>
    <div id="app">
        <p>
            count的值是:{{ count }}
        p>
        <button @click="add(1, $event)">
            按钮
        button>
    div>
    
    <script src="vue.js">script>
    <script>
    	const vm = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                add(n, e) {
                    this.count +=n;
                    if(this.count%2 == 0) {
                        //e.target ==> button
                        e.target.style.backgroundColor = 'red';
                    } else {
                        e.target.style.backgroundColor = '';
                    }
                }
            }
        })
    script>
body>    
html>
  1. 效果

```
  1. 效果

vue2事件对象的使用_第1张图片

你可能感兴趣的:(js,vue.js,前端,javascript)