728x90
반응형
조건에 따른 표시 : v-if
<body>
<div id="app">
<h2>True일때만 표시</h2>
<input type="checkbox" v-model="myVisible">표시 {{myVisible}}<br>
<!-- <p v-show="myVisible">체크박스 ON</p> -->
<p v-if="myVisible">체크박스 ON</p>
<p v-else>체크박스 OFF</p>
</div>
<script>
new Vue({
el : '#app',
data : {
myVisible : false,
isShow : true,
}
})
</script>
</body>
- 클릭하면 버튼을 삭제하는 예제
<body>
<div id="app">
<h2>클릭하면 "좋아~" 버튼을 삭제하는 예제</h2>
<button v-if="isShow" v-on:click="good">좋아~</button>
</div>
<script>
new Vue({
el : '#app',
data : {
myVisible : false,
isShow : true,
},
methods : {
good : function(){
this.isShow = false;
}
}
})
</script>
</body>
반복 표시 : v-for
- 배열 데이터를 리스트로 출력
<body>
<div id="app">
<!--반복 표시 : v-for-->
<h2>배열 데이터를 리스트로 표시하는 예제</h2>
<ul>
<li v-for="item in myArray">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray : ['소보루빵', '초코소라빵', '크로와상', '피자빵'],
}
})
</script>
</body>
- 오브젝트 배열 데이터를 리스트로 출력
<body>
<div id="app">
<h2>오브젝트 배열 데이터를 리스트로 표시하는 예제</h2>
<ul>
<li v-for="item in objArray">{{item.name}} \{{item.price}}</li>
</ul>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray : ['소보루빵', '초코소라빵', '크로와상', '피자빵'],
objArray : [
{name : '소보루빵', price : 1000},
{name : '초코소라빵', price : 1800},
{name : '크로와상', price : 1700},
{name : '피자빵', price : 2000}
]
}
})
</script>
</body>
- 구구단을 출력하는 예제
더보기
<body>
<div id="app">
<h2>1 x 5 ~ 10 x 5를 반복 표시하는 예제</h2>
<ul>
<li v-for="n in 10"> {{n}} x 5 = {{n * 5}}</li>
</ul>
</div>
<script>
new Vue({
el : '#app'
})
</script>
</body>
- 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제
더보기
<body>
<div id="app">
<h2>배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제</h2>
<ul>
<li v-for="(item, index) in myArray">{{index}} : {{item}}</li>
</ul>
</div>
<script>
new Vue({
el : '#app',
data : {
myVisible : false,
isShow : true,
myArray : ['소보루빵', '초코소라빵', '크로와상', '피자빵']
}
})
</script>
</body>
- 배열 데이터를 테이블로 출력하는 예제
더보기
<body>
<div id="app">
<h2>배열 데이터를 테이블로 표시하는 예제</h2>
<table border="1" width="500">
<thead>
<!-- 테이블 헤어 반복 -->
<th v-for="item in header">{{ item }}</th>
</thead>
<tbody>
<!-- 1행 반복 -->
<tr v-for="line in ranking">
<!-- 1데이터 반복 -->
<td v-for="item in line">{{ item }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el : '#app',
data : {
header : [ "프로그램언어",2018,2013,2008,2003,1998],
ranking: [
['Java',1,2,1,1,16],
['C',2,1,2,2,1],
['C++',3,4,3,3,2],
['Python',4,7,6,11,23],
['JavaScript',7,10,8,7,20]
]
}
</script>
</body>
배열 데이터의 추가, 삭제
<body>
<div id="app">
<!--배열 데이터의 추가와 삭제-->
<h2>맨 뒤에 데이터 추가하기</h2>
<ul>
<li v-for="item in myArray2">{{item}}</li>
</ul>
<br>
<button v-on:click="addLast">맨 뒤에 추가</button><br>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray2 : ['첫번째', '두번째', '세번째', '네번째', '다섯번째'],
}
methods : {
addLast : function(){
this.myArray2.push("[맨 뒤에 추가]");
}
}
})
</script>
</body>
- 버튼으로 리스트레 추가/삭제 예제 (methods 추가)
<body>
<div id="app">
<ul>
<li v-for="item in myArray2">{{item}}</li>
</ul>
<br>
<button v-on:click="addLast">맨 뒤에 추가</button>
<button v-on:click="addObj(3)">중간에 추가</button> <!--3번째와 4번째 사이에 추가-->
<button v-on:click="changeObj(0)">첫번째 변경</button>
<button v-on:click="deleteObj(1)">두번째 삭제</button>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray2 : ['첫번째', '두번째', '세번째', '네번째', '다섯번째'],
},
methods : {
addLast : function(){
this.myArray2.push("[맨 뒤에 추가]");
},
addObj : function(index){
this.myArray2.splice(index, 0, '추가');
},
changeObj : function(index){
this.myArray2.splice(index, 1, '[변경]');
},
deleteObj : function(index){
this.myArray2.splice(index, 1);
}
}
})
</script>
</body>
- 버튼 클릭 시 정렬하는 예제
<body>
<div id="app">
<h2>버튼 클릭 시 Sort하는 예제</h2>
<ul>
<li v-for="item in myArray2"> {{ item }}</li>
</ul>
<button v-on:click="sortData(myArray2)">소트</button><br>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray2 : ['첫번째', '두번째', '세번째', '네번째', '다섯번째']
},
methods : {
sortData: function(listdata) {
listdata.sort(function(a,b) {
return (a < b ? -1 : 1);
});
}
}
})
</script>
</body>
v-for와 v-if의 조합
ex)
- 배열에서 값 출력을 반복하며 조건을 만족할 때만 표시
=> <태그명 v-for="변수 in 배열" v-if="조건">조건만족 시 출력할 부분</태그명>
- 지정한 횟수만큼 반복하고 조건을 만족할 때만 표시
=> <태그명 v-for="변수 in 반복할 홧수 v-if="조건">조건만족 시 출력할 부분</태그명>
- v-for, v-if의 조합 연습
ㅇ 짝수만 표시하는 예제
더보기
<body>
<div id="app">
<!--v-if, v-for의 조합-->
<h2>짝수만 표시하는 예제</h2>
<ul>
<li v-for="item in myArray3" v-if="item % 2 == 0"> {{ item }}</li>
</ul>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray3 : [1, 2, 3, 4, 5, 6]
}
})
</script>
</body>
ㅇ 버튼 클릭 시 짝수만 표시하는 예제
더보기
<body>
<div id="app">
<h2>버튼 클릭 시 짝수만 표시하는 예제</h2>
<ul>
<li v-for="item in myArray3">{{item}}</li>
</ul>
<button v-on:click="evenData()">짝수만 표시</button><br>
</div>
<script>
new Vue({
el : '#app',
data : {
myArray3 : [1, 2, 3, 4, 5, 6]
},
methods : {
evenData : function(){
this.myArray3 = this.myArray3.filter(
function(value) { return value % 2 == 0; }
);
}
}
})
</script>
</body>
728x90
반응형