반응형
기능 설명
- 기존 목록 불러오기
- 목록 추가기능 (이름, 수량)
- 목록에서 체크리스트 체크/체크 해제 기능
- 중요도 확인 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!-- 라이브러리 복사 -->
<style>
li{
height:30px;
background-color: green;
width:200px;
}
.impClass{
background-color:pink;
}
</style>
</head>
<body>
<h3>장바구니 목록</h3>
<div id="app">
<ul id="check">
<li v-for="item in list" v-bind:class="{impClass:item.important}" v-show="!item.check"
v-on:click="item.check=!item.check">
{{item.name}} / {{item.num}} / {{item.important}} </li>
</ul>
<ul id="notcheck">
<li v-for="item in list" style="background-color:gray; text-decoration:ling-through" v-show="item.check"
v-on:click="item.check=!item.check">
{{item.name}} / {{item.num}} / {{item.important}} </li>
</ul>
<form>
name:<input type="text" v-model="vname"><br/>
num:<input type="number" v-model="vnum"><br/>
중요해?<input type="checkbox" v-model="important">{{important}}<br/>
<button v-on:click.prevent="add">추가</button> <!-- //button 태그는 submit 버튼임 -->
</form>
</div>
<script type="text/javascript">
const app = Vue.createApp({
data(){
return {
list:[
{name:'토마토', num:5, important:true, check:false},
{name:'귤', num:12, important:false, check:false}
],
vname:'',
vnum:0,
important:false,
check:false
}
},
methods:{
add(){
let item = {name:this.vname, num:this.vnum, important:this.important, check:false}
this.list.push(item)
this.vname=''
this.vnum=0
this.important=false
}
}
})
app.mount('#app')
</script>
</body>
</html>반응형
