데이터 바인딩

 

데이터 바인딩

 

• {{ message1 }} : JavaScript 변수 message1의 값을 화면에 출력한다.
• :title 속성을 통해 이 요소의 타이틀을 message3으로 설정 한다.
• v-bind="attrs" 을 통해 class와 title 속성을 설정하여 글자색을 빨강으로 변경한다.

// HTML
<template>
	
  <p>{{ message1 }}</p>
  <h1>{{ message2 }}</h1>
  <h1 :title="message3">{{ message3 }}</h1>
  <h1 v-bind="attrs">{{ message3 }}</h1>
  
</template>

// Javascript
<script setup>
	
  const message1 = 'Hello World!';
  const message2 = 'Hello';
  const message3 = 'こんにちは！';

  const attrs = {class:"font", tilte:"font"};
  
</script>

// CSS
<style>
.font {
    color: red;
}
</style>

---