뷰(Vue) 디렉티브 + 계산형 속성 예제

 

1

See the Pen [Vue.js] 뷰(Vue) 디렉티브 + 계산형 속성 예제 by junheeleeme (@junheeleeme) on CodePen.

 

<input type="text" placeholder="이름" v-bind:value="countryname" @keyup="nameChanged"/> 
//v-on: 을 @ 로 줄여서 사용가능
//@input="nameChanged" 도 가능
//keyup 발생 시 nameChanged 메소드 실행
 
 var App = new Vue({
        el: "#app",
        data : {
            countryname : "",
            countries : [
                {no : 1, name : "제니", birth_date : "950116", real_name : "김제니"},
                {no : 2, name : "지수", birth_date : "940103", real_name : "김지수"},
                {no : 3, name : "로제", birth_date : "960211", real_name : "박채영"},
                {no : 4, name : "리사", birth_date : "960327", real_name : "마노반"},
                {no : 5, name : "RM", birth_date : "940912", real_name : "김남준"},
                {no : 6, name : "지민", birth_date : "951013", real_name : "박지민"},
                {no : 7, name : "뷔", birth_date : "951230", real_name : "김태형"},
                {no : 8, name : "정국", birth_date : "970901", real_name : "전정국"},
                {no : 9, name : "제이홉", birth_date : "940218", real_name : "정호석"},
                {no : 10, name : "슈가", birth_date : "930309", real_name : "민윤기"},
                {no : 11, name : "나연", birth_date : "950922", real_name : "임나연"},
                {no : 12, name : "사나", birth_date : "961229", real_name : "미나토자키 사나"}
            ]
        },
        computed :{
            filtered : function(){
                var cname = this.countryname.trim();  //입력받은 문자열 공백제거
                return this.countries.filter(function(item, index){
                    if(item.name.indexOf(cname) > -1){ //item.name과 입력받은 문자열, 인덱스값으로 검색  
                        return true;
                    }
                });
            }
        },
        methods :{  //텍스가 입력될때마다 값을 변경하여 실시간으로 바인딩
            nameChanged : function(e){
                this.countryname = e.target.value;
            }
        }
    });

 

객체 데이터들을 실시간으로 검색하여 페이지 이동없이 바인딩해주는게 놀라울따름

 

 

저작자표시