Life.Contains("Coding");

v-if 디렉티브 v-if는 조건부로 블록을 렌더링 하는 데 사용된다. 블록은 디렉티브 표현식이 true 값을 반환하는 경우에만 렌더링 된다. Vue is awesome! v-else 디렉티브 v-else를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다. Toggle Vue is awesome! Oh no 😢 v-else element는 v-if 또는 v-if-else element 바로 뒤에 와야 한다. 바로 뒤에 오지 않는다면 인식되지 않는다. v-else-if v-else-if는 이름에서 알 수 있듯, v-if의 else if 블록 역할을 한다. 여러 번 연결되어 사용될 수 있다. A B C Not A/B/C v-else와 마찬가지로 v-else-if element는 v-if 또는 v-e..

데이터 바인딩의 일반적인 요구사항은 element의 클래스 목록과 인라인 스타일을 조작하는 것이다. 클래스와 스타일 모두 속성이므로 v-bind를 이용하여 처리할 수 있다. 표현식으로 최종 문자열을 계산하기만 하면 된다. 하지만 문자열 연결을 방해하는 것은 성가시고 오류가 발생하기 쉽기에 Vue는 v-bind가 class와 style과 함께 사용될 때 특별한 개선 사항을 제공한다. 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있다. Binding HTML Classes Binding to Objects :class(v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있다. 위 구문은 active 클래스의 존재 여부가 isActive의 값(true/false)에 따라 결정..

Basic Example 템플릿 내에서의 표현식은 매우 편리하지만 간단한 작업을 위한 것으로, 템플릿에 너무 많은 로직을 넣으면 코드가 복잡해지고 유지보수가 어려워질 수 있다. 예를 들어, 아래와 같이 중첩된 배열을 가지는 객체가 있을 때 export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } } } 그리고 author가 이미 책을 가지고 있는지의 여부에 따라 다른 메시지를 표시하고 싶다면 Has published books: {{ author.books.length > 0 ? 'Yes' : 'N..

Declaring Reactive State Options API에서는 data 옵션을 사용하여 component의 반응 상태를 정의하며 옵션 값은 객체를 반환하는 함수여야 한다. Vue는 새 component 인스턴스를 만들 때 함수를 호출하고 반응형 시스템으로 객체를 감싸 component 인스턴스에 $data로 저장한다. 편의상 최상위 수준의 속성도 component 인스턴스를 통해 바로 노출된다. export default { data() { return { count: 1 } }, // `mounted`는 추후에 설명될 lifecycle hook mounted() { // `this`는 component 인스턴스를 나타냄 console.log(this.count) // => 1 // 데이터도 변..