체인의정석

클래스와 스타일 바인딩 데이터 바인딩은 v-bind를 사용하여 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용됩니다. vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공하며 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 이런식으로 작성하게 되면 active 클래스의 존재 여부가 데이터 속성 isActive의 참속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한 v-bind:class는 일반 class 속성과 공존할 수 있습니다. 따라서 위와 같이 클래스를 여러개 둘 ..

computed 속성 mustach {{ }} 안에 표현식을 넣으면 편리하지만 이는 간단한 연산에만 한정됩니다. 따라서 복잡한 표현식이 들어가는 경우에는 computed속성을 사용해야 합니다. 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { // 계산된 getter reversedMessage: function () { // `this` 는 vm 인스턴스를 가리킵니다. return this.message.split('').reverse().join('') } } }) 이렇게 되었을때의 요점은 바인딩된 데이터에 ..

보간법 문자열 데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다. 메시지: {{ msg }}이렇게 될 경우 msg 가 쓰여진 부분은 해당 데이터 객체의 msg 속성 값으로 대체되며 데이터 객체의 msg 속성이 변경될 때 마다 갱신된다. 다시는 변경하지 않습니다: {{ msg }}다음과 같이 v-once 디렉티브를 사용하는 경우 데이터 변경 시 업데이트 되지 않는 일회서 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다. 원시 HTML {{ }}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. Using mustaches: {{ rawHtml }} Using v-html directive: 속성 v-..