counter.vue 596 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template recyclable="true">
  2. <div>
  3. <text class="output">{{count}}</text>
  4. <text class="button" @click="inc">+</text>
  5. </div>
  6. </template>
  7. <script>
  8. module.exports = {
  9. props: ['start'],
  10. data () {
  11. return {
  12. count: parseInt(this.start, 10) || 42
  13. }
  14. },
  15. methods: {
  16. inc () {
  17. this.count++
  18. }
  19. }
  20. }
  21. </script>
  22. <style scoped>
  23. .output {
  24. font-size: 150px;
  25. text-align: center;
  26. }
  27. .button {
  28. font-size: 100px;
  29. text-align: center;
  30. border-width: 2px;
  31. border-color: #DDD;
  32. background-color: #F5F5F5;
  33. }
  34. </style>