Suddenly I see Suddenly I see

ref 데이터의 연동 v-model 디렉티브를 사용하여 이 드롭다운 목록과 JavaScript 변수 selectedOption을 양방향 데이터 바인딩한다. 사용자가 목록에서 옵션을 선택하면 selectedOption의 값이 해당 옵션의 텍스트 값으로 업데이트된다. :style 디렉티브를 사용하여 이 요소의 텍스트 색상을 선택된 옵션 값(selectedOption)에 따라 동적으로 변경한다.

computed v-model 디렉티브를 사용하여 JavaScript 변수 price1, price2, price3와 양방향 데이터 바인딩된다. 두 개의 요소는 합계(calc1)와 합계의 10%(calc2)를 표시한다.

ref 데이터의 연동 v-model 디렉티브를 사용하여 이 라디오 버튼 그룹과 JavaScript 변수 selectedOption을 양방향 데이터 바인딩한다. 즉, 사용자가 라디오 버튼 중 하나를 선택하면 selectedOption의 값이 해당 버튼의 value 값으로 업데이트된다. v-if 디렉티브를 사용하여 selectedOption이 비어 있지 않은 경우에만 해당 선택된 옵션을 표시한다.

ref 데이터의 연동 v-model : 필드와 JavaScript 변수 msg를 양방향 데이터 바인딩한다. 이렇게 하면 msg의 값이 입력 필드에 표시되고 입력 필드의 내용이 변경되면 msg의 값도 업데이트된다. :placeholder 속성을 사용하여 이 두 입력 필드의 플레이스홀더(placeholder) 값을 msg의 현재 값으로 설정한다. 플레이스홀더는 입력 필드에 사용자에게 어떤 정보를 입력해야 하는지 알려주는 텍스트이다. msg의 값은 여기에서는 읽기 전용으로 표시되며, 실제 입력되는 값에 영향을 주지 않는다. import { ref } from 'vue' : Vue 3의 ref 함수를 가져와서 사용한다. ref 함수를 사용하면 반응성 있는 데이터를 생성할 수 있다. const msg = ref(..

Javascript 구문의 사용 {{ concatenatedString() }} : JavaScript 함수 concatenatedString()의 반환 값을 화면에 출력한다. 이 함수는 string1과 string2를 결합하여 "Hello world!" 문자열을 반환한다. {{ checkNum(date) }} : checkNum() 함수의 반환 값을 화면에 출력한다. 이 함수는 현재 날짜(date)에서 3년 후의 날짜를 계산하고 해당 날짜를 문자열 형식으로 반환한다. // HTML {{ concatenatedString() }} {{ checkNum(date) }} // Javascript

데이터 바인딩 {{ message1 }} : JavaScript 변수 message1의 값을 화면에 출력한다. :title 속성을 통해 이 요소의 타이틀을 message3으로 설정 한다. v-bind="attrs" 을 통해 class와 title 속성을 설정하여 글자색을 빨강으로 변경한다. // HTML {{ message1 }} {{ message2 }} {{ message3 }} {{ message3 }} // Javascript // CSS