watch2.html 904 B

12345678910111213141516171819202122232425262728293031323334353637
  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. <p style="font-size:25px;">计数器: {{ counter }}</p>
  12. <button v-on:click="counter++" style="font-size:25px;">点我</button>
  13. <button @click="counter++" style="font-size:25px;">点我</button>
  14. </div>
  15. <script type="text/javascript">
  16. var vm = new Vue({
  17. el: '#app',
  18. data: {
  19. counter: 1
  20. },
  21. watch: {
  22. searchQuery: function(query) {
  23. this.isSearch = false;
  24. this.items.push(query);
  25. }
  26. }
  27. });
  28. vm.$watch('counter', function(nval, oval) {
  29. //alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
  30. });
  31. </script>
  32. </body>
  33. </html>