목록v-bind (1)

SeouliteLab

Vue.js 데이터 바인딩: v-bind 디렉티브를 활용하여 속성과 클래스를 동적으로 제어하기

예제 1: 속성 바인딩 파일명: AttributeBinding.vue Go to Google 출력 결과: Go to Google 설명: 이 예제에서는 Vue의 v-bind 디렉티브를 사용하여 href 속성을 동적으로 바인딩합니다. href 속성에 바인딩된 값은 data 속성의 url 값입니다. 따라서 a 태그는 클릭 시 지정된 URL로 이동합니다. 예제 2: 클래스 바인딩 파일명: ClassBinding.vue Click me 출력 결과: Click me 설명: 이 예제에서는 Vue의 v-bind 디렉티브를 사용하여 클래스를 동적으로 바인딩합니다. isActive 데이터 속성의 값에 따라 버튼에 active 클래스가 추가되거나 제거됩니다. active 클래스가 추가되면 버튼의 배경색과 글자색이 변경됩니다..
프로그래밍 2024. 3. 22. 16:52
이전 Prev 1 Next 다음