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