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..

개발자라면 프론트엔드와 백엔드를 구분하지 않고 영역을 끊임없이 넓혀나가야 하지 않을까. 지난 회사에서 다루었던 Vue.js, 이직 후 머릿속 한편 구석에 박아두었지만 다시 꺼낼 때가 된 것 같다. Windows11으로 업그레이드 한 김에 Vue.js 개발환경 설정을 시작해본다. 1. Visual Studio Code 설치 .NET 개발자인 나에게 세상에서 제일 익숙한 Visual Studio Code. Visual Studio에 비해 훨씬 가볍고 다양한 Extension을 지원하는 것이 가장 큰 특징이다. 어떠한 개발 언어든 가볍게 사용하기에 Visual Studio Code만 한 게 없지 않을까. https://code.visualstudio.com/ Windows11로 업그레이드하니 모든 창이 mac..