v-on事件处理.html 801 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title></title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <link href="../css/style.css" rel="stylesheet"> </head>
  9. <body>
  10. <div id="app">
  11. <div>
  12. <button v-on:click="counter += 1">增加 1</button>
  13. <p>这个按钮被点击了 {{ counter }} 次。</p>
  14. </div>
  15. <div>
  16. <button v-on:click="btnClick('测试1')">测试1</button>
  17. <button @click="btnClick('测试2')">测试2</button>
  18. </div>
  19. </div>
  20. <script>
  21. new Vue({
  22. el: '#app',
  23. data: {
  24. counter: 0
  25. },
  26. methods: {
  27. btnClick: function(pname) {
  28. this.mygame = pname;
  29. alert(pname);
  30. },
  31. },
  32. })
  33. </script>
  34. </body>
  35. </html>