반응형
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- id 가 app 태그 안에서 작업이 이뤄짐 -->
<div id="app">
<!-- 일일이 입력 -->
<ul>
<li>{{map.pNname}}</li>
<li>{{map.price}}</li>
<li>{{map.size}}</li>
</ul>
<!-- v-for 사용 -->
<ul>
<li v-for="item in map">{{item}}</li>
<li></li>
<li></li>
</ul>
</div>
<!-- list 안에 map 접근하는 방법 -->
<ul v-for="item in list">
<li>{{item.pName}}</li>
<li>{{item.price}}</li>
<li>{{item.size}}</li>
</ul>
</body>
</html>
<!-- Vue
1. data 영역 : 변수 지정
2. methods 영역 : 함수 지정-->
<script>
var app = new Vue({
el: '#app',
data: {
map : {pName : "pepero", price : 1500, size : "15cm"},
list : [{pName : "pepero", price : 1500, size : "15cm"},
{pName : "pokachip", price : 1800, size : "30cm"},
{pName : "homerunball", price : 3000, size : "15cm"},
{pName : "oreo", price : 2500, size : "18cm"},
{pName : "candy", price : 500, size : "3cm"}
]
}
, methods: {
fnAge : function() {
}
}
// 화면이 시작될 때 실행
, created: function () {
// this.fnAge();
}
});
</script>반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] Vue 복습문제 - 검색, 체크박스, 삭제 #0417수업 #2교시 (0) | 2023.04.17 |
|---|---|
| [Vue] Vue 복습문제 #0417수업 #1교시 (0) | 2023.04.17 |
| [Vue] #0414수업 #8교시 (0) | 2023.04.14 |
| [Vue] v-for #0414수업 #7교시 (0) | 2023.04.14 |
| [Vue] v-if 기본문법 #0414수업 #5교시 (0) | 2023.04.14 |