computed 썸네일형 리스트형 [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 ◎ 이번에 배운 computed, watch를 이용한 예제 조건) ▷ 입력 금지 문자열을 ,(콤마) 기준으로 입력할 수 있다. ▷ 제한 시간을 넣고 시작 버튼을 누르면 텍스트를 넣을 수 있다. ▷ 제한 시간이 실시간으로 표시된다. ▷ 입력 중 금지 문자열이 나올 경우 경고를 띄우고 확인 버튼을 누르면 해당 문자열은 삭제되며 시간이 +10초 추가된다. ▷ 제한 시간이 완료되면 텍스트 입력창은 비활성화되고 입력 창 아래 입력한 문자의 개수가 표시되며 금지어를 사용한 횟수 * 12 한 벌점을 출력한다. 결과 화면) 제한 시간내에 문자 입력하기 금지문자 (,로 나누어 복수입력가능) 제한시간을 입력하세요 (초) 시작 남은 시간 {{ restTime }}초 {{ inputText.length }} 개의 문자를 입력.. 더보기 [java script] Vue.js 데이터를 사용한 계산 2 (computed) 어제에 이어 computed를 이용한 추가 예제 하나만 더 보겠습니다!! ◎ 적,녹,청색의 슬라이더(range)를 움직이면 완성된 색을 표시하는 예제 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 {{ mixColor }} R : G : B : Range와 min, max 값을 이용해서 범위를 지정하고 슬라이더를 움직이면 값이 변경되면서 색이 변합니다. 다른 예제들과 다른 점은 기존의 RGB 값을 이용했다는 것입니다. 추가적으로 슬라이더바 옆에 입력 창을 넣어 직접 수치 입력가능하게 하고 새로운 슬라이더 바를 넣어서 글자색을 조절 가능하게 생성해보겠습니다! ◎ 추가 예제 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 {{ mixColor }} R : G : B .. 더보기 [java script] Vue.js 데이터를 사용한 계산(computed) 1. computed : 데이터의 값을 계산하여 쓸 때 사용하는 산출 프로퍼티 예시로 바로 확인해 보겠습니다. 금액을 입력하면 소비세가 포함된 금액을 계산하는 예제 원 소비세 포함 금액 {{ taxIncluded }} 원 taxIncluded라는 프로퍼티에 계산하는 function을 넣어 반환하는 예시입니다. 아래와 같은 출력 값을 확인할 수 있습니다. ◎ 단가와 개수를 입력해 세금 포함 금액을 계산하는 예제 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 원 x 개 합계 {{ sum }} 원 세금포함 {{ taxIncluded }} 원 sum 함수를 따로 지정하고 그 함수는 다른 함수에서 사용할 수 있습니다. alt + 255 하면 ' ' 값이 들어가는 빈 공간을 하나 생성할 수 있습니다. ◎ 국.. 더보기 이전 1 다음
