.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
일반 데이터 바인딩
<div> {{ data }} <div>
JavaScript
복사
사용
•
이중 중괄호 문법의 텍스트 보간법 형태로 사용
•
해당 컴포넌트 인스턴스의 값이 변경될 때마다 실시간으로 반영됌
// js
<script setup>
const price = 1;
</script>
// html
<template>
<div>
<p>{{price}} 만원</p>
</div>
</template>
JavaScript
복사
v-bind
<div
v-bind:속성명="데이터 혹은 함수"
:속성명="데이터 혹은 함수"
>
<div>
HTML
복사
사용
<div id="vue">
<input v-bind:value="name">
</div>
TypeScript
복사
v-html
<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>
텍스트 보간법 사용: <span style="color: red">이것은 빨간색이어야 합니다.</span>
v-html 디렉티브 사용: 이것은 빨간색이어야 합니다.
HTML
복사
