728x90
반응형
vueex7.html
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220530/vueex7.html
Vue 디렉티브
v-bind : Vue객체의 데이터와 요소를 연결
v-html : innerHTML과 같은 의미. 내부의 값을 html형식으로 처리
v-model : 값을 Vue 객체에 저장
v-if, v-else-if, v-else : 조건 처리
v-show : 조건이 참인 경우 보여줌
v-for : 반복문
Vue 객체
el : Vue 객체의 영역 설정
data : 영역에서 사용될 데이터. json 형식
computed : 함수를 지정
methods : 이벤트 함수 지정
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
<style>
#list { width:400px; border: 1px solid black; border-collapse: collapse; }
#list td, #list th { border: 1px solid black; text-align: center; }
#list>thead>tr { color: yellow; background-color:purple; }
</style>
</head>
<body>
<div id="simple">
<p>국가명 :
<!--
value속성의 값 countryname으로 입력
@input : 이벤트 등록. text 태그에 값이 입력되는 경우.
v-on 속성과 같은 기능임.
nameChanged : 이벤트 핸들러. 함수이름.
-->
<input type="text" :value="countryname" placeholder="국가명" @input="nameChanged" />
</p>
<table id="list">
<thead>
<tr>
<th>번호</th>
<th>국가명</th>
<th>수도</th>
<th>지역</th>
</tr>
</thead>
<tbody>
<!--
v-for : 반복문.
filtered 함수의 결과
-->
<tr v-for="c in filtered">
<td>{{c.no}}</td>
<td>{{c.name}}</td>
<td>{{c.capital}}</td>
<td>{{c.region}}</td>
</tr>
</tbody>
</table>
</div>
<script>
let model = { //json 객체.
countryname: "",
countries: [
{ no: 1, name: "미국", capital: "워싱턴DC", region: "america" },
{ no: 2, name: "프랑스", capital: "파리", region: "europe" },
{ no: 3, name: "영국", capital: "런던", region: "europe" },
{ no: 4, name: "중국", capital: "베이징", region: "asia" },
{ no: 5, name: "태국", capital: "방콕", region: "asia" },
{ no: 6, name: "모로코", capital: "라바트", region: "africa" },
{ no: 7, name: "라오스", capital: "비엔티안", region: "asia" },
{ no: 8, name: "베트남", capital: "하노이", region: "asia" },
{ no: 9, name: "피지", capital: "수바", region: "oceania" },
{ no: 10, name: "솔로몬 제도", capital: "호니아라", region: "oceania" },
{ no: 11, name: "자메이카", capital: "킹스턴", region: "america" },
{ no: 12, name: "나미비아", capital: "빈트후크", region: "africa" },
{ no: 13, name: "동티모르", capital: "딜리", region: "asia" },
{ no: 14, name: "멕시코", capital: "멕시코시티", region: "america" },
{ no: 15, name: "베네수엘라", capital: "카라카스", region: "america" },
{ no: 16, name: "서사모아", capital: "아피아", region: "oceania" }
]
};
let simple = new Vue ({ //Vue 객체.
el : '#simple', //Vue 객체의 역영 설정. #:id="simple"인 태그 (div태그)
data : model, //Vue 영역에서 사용 될 객체 설정
computed : { //Vue 영역에서 사용 될 함수 설정
filtered : function() {
//this : Vue 객체의 데이터
let cname = this.countryname.trim() //trim() : 양쪽 공백 없앰
//filter : 배열의 함수
// 리턴값이 True인 요소만 리턴
//item : 배열의 요소값 한개. { no: 9, name: "피지",......}
return this.countries.filter(function(item) {
//indexOf(문자) : 문자의 위치 인덱스 리턴. -1값인 경우 문자가 없음을 의미
if(item.name.indexOf(cname) > -1) { //cname이 item.name에 존재
return true
}
});
}
},
methods : { //이벤트 핸들러. 이벤트 발생시 호출되는 함수
nameChanged : function(e) {
//e.target : 이벤트가 발생된 요소. input 태그
this.countryname = e.target.value
}
}
});
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 이벤트 처리하기 (vueex2.html ) (0) | 2022.05.31 |
|---|---|
| [Vue] 28. vue의 라이프사이클 (vueex1.html ) (0) | 2022.05.31 |
| [Vue] 28. 두 수의 합 구하기 (exam1.html ) (0) | 2022.05.30 |
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |
| [Vue] 28. v-for 예제2 (vueex5.html ) (0) | 2022.05.30 |