vue, input 태그예제

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 다음에 다으모가 같이 추가하고

이렇게 필터를 적용한다.