728x90
<template>
<div>
<h1>{{ mesg }}</h1>
<div v-for="(book, idx) in bookList" :key="idx"> <!-- key는 유일한 값 -->
<!-- 체크하면 체크박스의 value인 책JSON이 books[]에 저장 -->
<!-- 체크할 때마다 books[]이 바뀜 -->
<input type="checkbox" v-model="books" v-bind:value="book">
<span>{{book.name}}</span>
<span>{{book.price}}</span>
</div>
<hr>
선택 교재:
<!-- books[]을 for문을 통해 하나씩 출력 -->
<!-- 위에서 체크될 때마다 출력되며, book.name을 통해 JSON 중 이름만 출력 -->
<!-- key가 동일하면 에러 출력(작동은 됨) -->
<div v-for="(book, i) in books" :key="i+11">
{{ book.name }}
</div>
<hr>
전체 가격:
{{ getTotal() }}
</div>
</template>
<script>
export default {
props:{
mesg: String
},
data: function(){
return {
bookList: [
{name:"자바의 정석", price:3000},
{name:"JSP 정석", price:4000},
{name:"Spring 정석", price:5000},
{name:"jQuery 정석", price:6000},
{name:"Angular 정석", price:7000},
],
books:[], //선택된 책 목록 저장
total:0 //총액
}
},
methods: {
getTotal: function(){
var sum=0;
var books = this.books;
books.map(
function(element, index){
console.log(index, element.name, element.price);
sum += element.price;
}
);
console.log("sum")
this.total = sum;
return this.total;
},
}
}
</script>
<style>
</style>
<template>
<div>
<h1>{{ mesg }}</h1>
<div v-for="(book, idx) in bookList" :key="idx"> <!-- key는 유일한 값 -->
<!-- 체크하면 체크박스의 value인 책JSON이 books[]에 저장 -->
<!-- 체크할 때마다 books[]이 바뀜 -->
<input type="checkbox" v-model="books" v-bind:value="book">
<span>{{book.name}}</span>
<span>{{book.price}}</span>
</div>
<hr>
선택 교재:
<!-- books[]을 for문을 통해 하나씩 출력 -->
<!-- 위에서 체크될 때마다 출력되며, book.name을 통해 JSON 중 이름만 출력 -->
<div v-for="(book, i) in books" :key="i+11">
{{ book.name }}
</div>
<hr>
전체 가격:
{{ getTotal() }}
</div>
</template>
<script>
export default {
props:{
mesg: String
},
data: function(){
return {
bookList: [
{name:"자바의 정석", price:3000},
{name:"JSP 정석", price:4000},
{name:"Spring 정석", price:5000},
{name:"jQuery 정석", price:6000},
{name:"Angular 정석", price:7000},
],
books:[], //선택된 책 목록 저장
total:0 //총액
}
},
methods: {
getTotal: function(){
var sum=0;
var books = this.books;
for(let index = 0; index < this.books.length; index++){
let b = this.books[index];
sum += b.price
}
this.total = sum;
return this.total;
},
}
}
</script>
<style>
</style>
<template>
<div>
<h1>{{ mesg }}</h1>
<div v-for="(book, idx) in bookList" :key="idx"> <!-- key는 유일한 값 -->
<!-- 체크하면 체크박스의 value인 책JSON이 books[]에 저장 -->
<!-- 체크할 때마다 books[]이 바뀜 -->
<input type="checkbox" v-model="books" v-bind:value="book">
<span>{{book.name}}</span>
<span>{{book.price}}</span>
</div>
<hr>
선택 교재:
<!-- books[]을 for문을 통해 하나씩 출력 -->
<!-- 위에서 체크될 때마다 출력되며, book.name을 통해 JSON 중 이름만 출력 -->
<div v-for="(book, i) in books" :key="i+11">
{{ book.name }}
</div>
<hr>
전체 가격:
{{ total }}
</div>
</template>
<script>
export default {
props:{
mesg: String
},
data: function(){
return {
bookList: [
{name:"자바의 정석", price:3000},
{name:"JSP 정석", price:4000},
{name:"Spring 정석", price:5000},
{name:"jQuery 정석", price:6000},
{name:"Angular 정석", price:7000},
],
books:[], //선택된 책 목록 저장
total:0 //총액
}
},
watch:{
books:function(){
var sum=0;
for(let index = 0; index < this.books.length; index++){
let b = this.books[index];
sum += b.price
}
this.total = sum;
}
}
}
</script>
<style>
</style>
'단순 코드 기록 > Vue' 카테고리의 다른 글
| Vue_Calculator응용 (0) | 2024.03.08 |
|---|---|
| Vue_Watch(자동 호출 함수) (0) | 2024.03.07 |
| Vue_v-once: 한번 랜더링되면 더이상 바뀌지 않음 (0) | 2024.03.07 |
| Vue_v-on (0) | 2024.03.07 |
| Vue_v-for, template태그 (0) | 2024.03.07 |