购物软件中小组件

商品数量加减按钮

 1 <div class="count">
 2 <div class="number">购买数量:</div>
 3 <div class="button">
 4 <button @click="add">+</button>
 5 {{count}}
 6 <button @click="reduce">-</button>
 7 </div>
 8 </div>
 9 <script>
10 export default {
11 data() {
12 return {
13 count: 1,
14 }
15 },
16 methods: {
17 add() {
18 this.count++
19 },
20 reduce() {
21 this.count--
22 },
23 }
24 }
25 </script>

返回按钮

 1 <temple>
 2 <button @click="back">
 3 <svg t="1651652476290" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
 4 p-id="7081" width="32" height="32">
 5 <path d="M475 276V141.4c-12.1-56.3-58.2-22-58.2-22L96.6 395.9c-70.4 48.9-4.8 85.7-4.8 85.7l315.4 274.1c63.1 46.5 67.9-24.5 67.9-24.5V606.4C795.3 506 926.3 907.5 926.3 907.5c12.1 22 19.4 0 19.4 0C1069.4 305.4 475 276 475 276z"
 6 p-id="7082" fill="#ffffff"></path>
 7 </svg>
 8 </button>
 9 </temple>
10 <script>
11 export default {
12 name: "SearchHeader",
13 
14 methods: {
15 back() {
16 this.$router.go(-1)
17 },}
18 }
19 </script>

 

posted @ 2022-05-13 10:49  WW&xx  阅读(11)  评论(0)  编辑  收藏  举报