Vue:데이터바인딩: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
(새 문서: {{Vue}} == 개요 == Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다. 한글...) |
(→개요) |
||
| 1번째 줄: | 1번째 줄: | ||
{{Vue}} | {{Vue}} | ||
== 개요 == | ==개요== | ||
Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다. | Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다.한글도 된다.<br /> | ||
===HTML 속성 바인딩=== | |||
한글도 된다. | |||
<br /> | |||
=== HTML 속성 바인딩 === | |||
HTML 속성에 대해선 다른 문법을 쓴다. | HTML 속성에 대해선 다른 문법을 쓴다. | ||
<code>:속성명='이름'</code> 형태로 바인딩 할 수 있다. | <code>:속성명='이름'</code> 형태로 바인딩 할 수 있다. | ||
이외 id, class 등에 대해 바인딩이 가능하다. | |||
=== HTML 바인딩 === | |||
변수 안에 <code><nowiki><span style="color: red"></nowiki></code>를 담아 <code><nowiki>{{변수}}</nowiki></code>라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.) | |||
이런 제한을 풀기 위해선 <code><nowiki><p>Using v-html directive: <span v-html="변수"></span></nowiki><nowiki></p></nowiki></code> 형태로 써야 한다. | |||
2022년 7월 4일 (월) 23:19 판
개요
Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 {{ 이름 }} 형태로 대입할 수 있다.한글도 된다.
HTML 속성 바인딩
HTML 속성에 대해선 다른 문법을 쓴다.
:속성명='이름' 형태로 바인딩 할 수 있다.
이외 id, class 등에 대해 바인딩이 가능하다.
HTML 바인딩
변수 안에 <span style="color: red">를 담아 {{변수}}라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)
이런 제한을 풀기 위해선 <p>Using v-html directive: <span v-html="변수"></span></p> 형태로 써야 한다.