Vue Template Syntax 학습정리

문자표현

콧수염 태그 {{ }} 를 사용한다

<span>Message: {{ msg }}</span>

HTML을 그대로 표현

v-html 디렉티브를 사용한다

<!-- 잘된예 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<!-- 잘못된 예 : 태그가 문자형태로 찍혀서 나온다 -->
<p>Using mustaches: {{ rawHtml }}</p>

HTML 속성표현

v-bind:속성 또는 :속성 을 사용한다

콧수염 태그 {{ }} 에서는 HTML 속성을 표현할 수 없다

<!-- div 태그에 id 속성을 적용하려는 경우 -->
<div v-bind:id="dynamicId"></div>

<!-- 잘못 표현한 경우 -->
<div id='{{dynamicId}}'></div>

boolean 속성은 표현 방식이 다르다

<button v-bind:disabled="isButtonDisabled">Button</button>

isButtonDisabled 가 null, undefined, false 이면 disabled 속성이 button 에 포함되지 않는다

Javascript 표현식

콧수염 태그에 {{ }} 자바스크립트를 한 줄만 넣을 수 있다. 조건문은 넣을 수 없다

<!-- 사용 가능한 표현 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split(' ').reverse().join('') }}

<!-- 사용 불가능한 표현 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}

Uploaded by N2T