-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexercise.html
executable file
·88 lines (86 loc) · 3.42 KB
/
exercise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>우리가 어떤 민족입니까</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" class="container py-5">
<div class="row">
<div class="card-deck">
<div v-for="drink in drinks" :key="drink.id" class="col-md-4 card mb-3 px-0">
<img class="card-img-top" :src="drink.img" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{ drink.name }}</h5>
<p class="card-text">{{ drink.text }}</p>
<p class="card-text"><small class="text-muted">1분전 업데이트 됨</small></p>
<button @click="drink.counter += 1" class="btn btn-primary">장바구니에 담기</button>
<!-- <button-counter @increment="incrementTotal"></button-counter> -->
</div>
</div>
</div>
<div class="col-12 px-0 card text-center">
<div class="card-header">
장바구니 목록
</div>
<div class="card-body text-left">
<h5 class="card-title">다음을 구매하십니까?</h5>
<ul v-for="drink in drinks" :key="drink.id" >
<li class="card-text">{{ drink.name }} {{ drink.counter }}개</li>
</ul>
<button @click="removeData" class="btn btn-warning float-right">장바구니 초기화</a>
</div>
</div>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button @click="incrementCounter" class="btn btn-primary">장바구니에 담기</button>',
methods: {
incrementCounter() {
this.$emit('increment')
}
}
});
new Vue ({
el: '#app',
data: {
drinks: [
{ id: 1,
name: '커피커피',
text: '커피 또는 커피차는 커피나무의 씨를 볶아 가루로 낸 것을 따뜻한 물과 차가운물 또는 증기로 우려내어 마시는 쓴맛이 나는 음료이다.',
img: './assets/images/coffee.jpg',
counter: 0
},
{ id: 2,
name: '베리베리',
text: '과일 은 나무나 초본 식물에 달리는, 먹을 수 있는 열매를 가리킨다. 일반적으로 열매 부분은 버리고 씨만을 식용하는 호두는 과일로 치지 않는다.',
img: './assets/images/fruit.jpg',
counter: 0
},
{ id: 3,
name: '고기고기',
text: '고기는 동물의 살점, 특히 인간이 먹는 동물의 살을 이르는 말이다. 육류, 식육이라고도 한다. 맛있다.',
img: './assets/images/meat.jpg',
counter: 0
}
],
},
methods: {
incrementTotal() {
this.counter += 1;
},
removeData() {
drinks[1].counter = 0;
drinks[2].counter = 0;
drinks[3].counter = 0;
}
},
})
</script>
</body>
</html>