Vue.js 속성바인드 v-bind

1 개요

Vue.js 속성바인드 v-bind

2 예시1

<div id="app">
  <input size='60' v-bind:value="message">
 </div>

<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello ' + new Date()
      }
    }
  }).mount('#app')
</script>

3 예시2

<div id="app">
  <span v-bind:title="message">
    여기에 잠시 마우스를 올리고 있으면 동적으로 바인딩된 title을 볼 수 있습니다.
  </span>
</div>

<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        message: '이 페이지는 ' + new Date() + ' 에 로드되었습니다'
      }
    }
  }).mount('#app')
</script>

4 같이 보기

• Vue.js 단축표기
• Vue.js 폼 인풋 바인딩 v-model
• Vue.js disabled 처리
• Vue.js 시작하기

5 참고

• https://vuejs.org/guide/essentials/class-and-style.html