vue.js 实现购物车加减方法

Posted 2020-09-22 安心牧羊人

1. <template>
2. <div class="coutter-wrapper">
3. <button type="button" @click="plus">+</button>
4. <button type="button">{{ result }}</button>
5. <button type="button" @click="minus">-</button>
6. </div>
7. </template>
8. <script>
9. export default {
10. data() {
11. return {
12. result: 0,
13. }
14. }，
15. methods: {
16. minus() {
17. this.result--;
18. this.$emit(‘input‘, {res: this.result, other: ‘--‘})
19. },
20. plus() {
21. this.result++;
22. this.$emit(‘input‘, {res: this.result, other: ‘++‘})
23. }
24. }
25. }
26. </script>
27. <style lang="stylus" scoped>
28. button
29. border 0
30. outline 0
31. border-radius 3px
32. button:nth-child(2)
33. width 200px
34. </style>