input 태그에서 값 입력하면 그 값들을 출력하는 예제
v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.
input 태그 v-model 을 vue의 data 속성과 연결 해준다. v-model=newPlayer 이렇게 하고 newPlyaer의 값을 변경해주면
input 태그안에 그 값이 들어간다. v-on:kyeup.enter 로 엔터 쳤을때 addPlayer 메서드 동작, v-on:click는 클릭시 동작
players 배열에 객체 선언
addPlyer는 위 html 파일에서 입력값을 얻어와 plyaers 배열안 name 객체 속성에 값을 추가 해줘서 출력 가능
son 입력후 추가를 하면 아래 리스트에 son이 추가되었다.
엔터나 추가한뒤에 son 입력값이 남아있다. 이걸 없애려면 this.newPlayer='' 을 addplayer 메서드에 추가하면된다
여기서 이름의 앞글자를 대문자로 하고싶을때 filters를 사용 할 수 있다. 텍스트 형식화를 적용할 수 있다.
methods 다음에 다으모가 같이 추가하고
이렇게 필터를 적용한다.
