<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-on参数问题</title>
</head>
<body>

<div id="app">
  <h2>点击次数: {{counter}}</h2>
  <!--情况一: 方法没有参数-->

  <button @click=“btnClick1“>按钮1</button>
  <button @click=“btnClick1()“>按钮1</button>


  <!–情况二: 如果方法有参数–>
  <!–1.调用时不传入参数,会默认将event作为第一个参数传入–>
  <button @click=“btnClick2“>按钮2</button>
  <!–2.调用时不传入参数,那么参数为undefined–>
  <button @click=“btnClick2()“>按钮2</button>


  <!–情况三: 如果方法有参数,并且希望传入event–>
  <button @click=“btnClick3(10, $event)“>按钮3</button>
</div>


<script src=“../js/vue.js“></script>
<script>
  const app = new Vue({
    el: ‘#app’,
    data: {
      counter: 0
    },
    methods: {
      btnClick1() {
        console.log(‘按钮1被点击’);
      },
      btnClick2(payload) {
        console.log(‘按钮2被点击’, payload);
      },
      btnClick3(num, event) {
        console.log(‘按钮3被点击’, num, event);
      }
    }
  })
</script>


</body>
</html>
:hexoPostRenderEscape–>