front-end/Vue
Vue 데이터 바인딩 문법
Hoon0211
2024. 4. 2. 11:49
728x90
1. Vue 데이터 보관 방법
<script>
export default {
name : 'App',
data(){
return {
price : 6000
}
}
}
</script>
2. HTML 중간에 넣는 방법
<template>
<div>
맛있는 붕어빵
{{ price }} 원
</div>
</template>
3. App.vue 전체 코드
<template>
<div>
맛있는 붕어빵
{{ price }} 원
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
price: 6000
}
}
}
</script>
<style></style>
4. 쓰는 이유
- 실시간 렌더링 기능을 사용하기 위해서
- 웹앱 같은 효과를 주기 위해서
- HTML style, id, class도 데이터 바인딩으로 사용이 가능합니다.
728x90