async-edge-cases.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script src="../../dist/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- #4510 click and change event on checkbox -->
  10. <div id="case-1">
  11. <div @click="num++">
  12. {{ num }}
  13. <input type="checkbox" v-model="checked">
  14. </div>
  15. </div>
  16. <script>
  17. var vm1 = new Vue({
  18. el: '#case-1',
  19. data: {
  20. num: 1,
  21. checked: false
  22. }
  23. })
  24. </script>
  25. <!-- #6566 click event bubbling -->
  26. <div id="case-2">
  27. <div class="panel" v-if="expand">
  28. <button @click="expand = false, countA++">Expand is True</button>
  29. </div>
  30. <div class="header" v-if="!expand" @click="expand = true, countB++">
  31. <button>Expand is False</button>
  32. </div>
  33. <div class="count-a">
  34. countA: {{countA}}
  35. </div>
  36. <div class="count-b">
  37. countB: {{countB}}
  38. </div>
  39. </div>
  40. <script>
  41. var vm2 = new Vue({
  42. el: '#case-2',
  43. data: {
  44. expand: true,
  45. countA: 0,
  46. countB: 0,
  47. }
  48. })
  49. </script>
  50. </body>
  51. </html>