Vue:데이터바인딩: 두 판 사이의 차이

2022년 7월 5일 (화) 13:24 기준 최신판

Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 {{ 이름 }} 형태로 대입할 수 있다. 한글도 된다.
데이터바인딩 안에서 간단한 연산들도 이루어진다. {{ 이름.split('') + 1 }} 등으로.

HTML 속성에 대해선 다른 문법을 쓴다.

:속성명='이름' 형태로 바인딩 할 수 있다.

이외 id, class 등에 대해 바인딩이 가능하다. id에 null, undefined가 오면 해당 요소는 눈에 보이지 않게 된다.

<div v-bind:id="변수"></div> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)

다양한 속성을 담아 사용하고 싶은 경우, 다음과 같이 활용할 수도 있다.

<div v-bind="변수명"></div>
...

data() {
  return {
    변수명: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

변수 안에 <span style="color: red">를 담아 {{변수}}라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)

이런 제한을 풀기 위해선 <p>Using v-html directive: <span v-html="변수"></span></p> 형태로 써야 한다.

@@ 2번째 줄: / 2번째 줄: @@
 ==개요==
-Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다.한글도 된다.<br />
+Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다. 한글도 된다.<br />데이터바인딩 안에서 간단한 연산들도 이루어진다. <nowiki>{{ 이름.split('') + 1 }}</nowiki> 등으로.
 ===HTML 속성 바인딩===
 HTML 속성에 대해선 다른 문법을 쓴다.
@@ 11번째 줄: / 11번째 줄: @@
 <code><nowiki><div v-bind:id="변수"></div></nowiki></code> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)
+다양한 속성을 담아 사용하고 싶은 경우, 다음과 같이 활용할 수도 있다.<syntaxhighlight lang="html">
+<div v-bind="변수명"></div>
+...
+data() {
+  return {
+    변수명: {
+      id: 'container',
+      class: 'wrapper'
+    }
+  }
+}
+</syntaxhighlight>
 ===HTML 바인딩===