삽질개발코딩

오늘은 화면 구성에 기본적으로 많이 쓰이는 input 사용법에 대해서 알아보자. input은 말 그래도 입력칸을 의미한다. 글자, 숫자, 특수기호 등 키보드로 입력할 수 있는 모든것들을 넣을 수 있다. 코드 App.vue 입력결과 : {{input}} 설명 코드만 봐도 느끼겠지만 정말 간단해서 설명할게 없다. input 태그를 만들고 입력한 값을 저장할 수 있도록 v-model을 이용하여 미리 만들어 놓은 input 변수 안에 넣고 입력결과를 데이터 바인딩 한 것이다. 결과

select 특정 리스트들중 원하는 값을 선택하여 특정 값만 골라오는 것이 select기능이다. 정말 쉽고 화면 구성 시 가장 흔하게 쓰이는 기능 중 하나이니 알아두면 정말 좋다. 코드 App.vue {{color.name}} 선택결과 : {{result}} 설명 ■ 우선 div,select 문에 있는 'style' 기능은 단순히 보기 편하게 개인적으로 만든 것이니 신경쓰지 않아도 되고, 크게 설명할 필요는 없지만 select문을 한번도 접해보지 않은 사람을 위해 설명을 적는다. 전체적인 동작 설명을 하자면, 배열 'list'를 만들고 선택(select)박스 클릭 시 'list'안에 있는 항목들이 나타나고, 특정 항목을 선택 시 그 항목의 value 값을 나타내는 코드이다. 1. 를 입력하면 하단 결과 ..